Попытка отобразить все мои данные на спиральный график в D3.js - PullRequest
Новая
       60

Попытка отобразить все мои данные на спиральный график в D3.js

0 голосов
/ 25 февраля 2019

Я строю спиральный график в d3 и не могу отобразить все свои данные на спирали.Я получаю только 1 гистограмму в год, а не 3. Я модифицирую этот вопрос с помощью полного кода.

Вот мой код: 

  var width = 625,
  height = 625,
  start = 0,
  end = 2.25,
  numSpirals = 3,
  margin = {top:50,bottom:50,left:50,right:50};

  var theta = function(r) {
  return numSpirals * Math.PI * r;
  };

  var color = d3.scale.ordinal(d3.schemeCategory10); 

  var r = d3.min([width, height]) / 2 - 40;

  var radius = d3.scale.linear()
  .domain([start, end])
  .range([40, r]); 

  var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.left + margin.right)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + 
  ")");

var points = d3.range(start, end + 0.001, (end - start) / 1000);

var spiral = d3.svg.line.radial() 
  .interpolate("cardinal")
  .angle(theta)
  .radius(radius); 

var path = svg.append("path")
  .datum(points)
  .attr("id", "spiral")
  .attr("d", spiral)
  .style("fill", "none")
  .style("stroke-width", 3)
  .style("stroke", "steelblue");

var spiralLength = path.node().getTotalLength(),
    //N = 365, 
    N = 200,
    barWidth = (spiralLength / N) - 1;


function type(d) {
  d.Date = timeScale(d.Date);
  d.ID = +d.ID; 
  return d;
}

var timeScale = d3.time.scale()
  .domain(d3.extent(spiralData, function(d){
    return d.Date;
  }))
  .range([0, spiralLength]);

Вот частьЯ думаю, что может дать мне источник моей проблемы 

/*
var yScale = d3.scale.linear()
  .domain([0, d3.max(spiralData, function(d){
    return Math.max(d.Killed, d.Injured, d.Attacks); })
])
  .range([0, (r / numSpirals) - 30]);
*/ 

  var yScale = d3.scale.linear()
  .domain([
   //d3.min(spiralData, function (d) { return d.Killed, d.Injured, 
   d.Attacks; }),
   //d3.max(spiralData, function(d){ return d.Killed, d.Injured, 
   d.Attacks; })
   d3.min(spiralData, function (d) { return d.Killed }),
   d3.max(spiralData, function(d){ return d.Killed; }),
   ])
   .range([0, (r / numSpirals) - 30])

   .domain([
   d3.min(spiralData, function (d) { return d.Injured }),
   d3.max(spiralData, function(d){ return d.Injured; }),
   ])
   .range([0, (r / numSpirals) - 30]) 

   .domain([
   d3.min(spiralData, function (d) { return d.Attacks }),
   d3.max(spiralData, function(d){ return d.Attacks; })
  ])
  .range([0, (r / numSpirals) - 30]);  


svg.selectAll("rect")
  .data(spiralData)
  .enter()
  .append("rect")
  .attr("x", function(d,i){

    var linePer = timeScale(d.Date),
        posOnLine = path.node().getPointAtLength(linePer),
        angleOnLine = path.node().getPointAtLength(linePer - barWidth);

    d.linePer = linePer; // % distance are on the spiral
    d.x = posOnLine.x; // x postion on the spiral
    d.y = posOnLine.y; // y position on the spiral

    d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 
    90; //angle at the spiral position

    return d.x;
  })
  .attr("y", function(d){
    return d.y;
  })
  .attr("width", function(d){
    return barWidth;
  })

Я использую свой yScale для всех столбцов данных здесь (не уверен, что это нормально) 

  .attr("height", function(d){
    return yScale(d.Killed, d.Injured, d.Attacks); 
    //return yScale(d.Attacks);

  }) 
  .style("fill", function(d){return color(d.ID);}) 
  .style("stroke", "none")
  .attr("transform", function(d){
    return "rotate(" + d.a + "," + d.x  + "," + d.y + ")"; 
  });

Вотчасть моих данных: 

var spiralData = 
[
{
"ID": 1,
"Date": 1948,
"Killed": 379,
"Injured": 397,
"Attacks": 8
} ...

Надеюсь, это поможет

...