Question

我是d3的新手，目前有一个简单的折线图，可以显示两行以表示一组的某些数据。我想做的是能够灵活地为多个组创建多行。每个组将有几行，并且将为组父级进行颜色编码-在本例中，我的数据是资产或股票行情记录

当前，您可以在我的代码中看到我正在为每个路径手动创建一个数组，但是如果我开始拥有100条路径，我想这可能会变得非常混乱。有更好的方法吗？

我尝试使用d3.nest，但我一生都无法确定数据的方式，因此可以为每组线应用更新/输入/退出模式

这是我的在制品代码：


<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>
<div id="graphDiv"></div>

<!-- load the d3.js library -->    
<script src="https://d3js.org/d3.v5.min.js"></script>

<script>
    var data_set = [{
    'Date': '2009-03-23',
    'Raw': 25,
    'Raw2': 25,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-24',
    'Raw': 28,
    'Raw2': 25.4,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-25',
    'Raw': 26,
    'Raw2': 25.37,
    'Asset': 'B'
  },
  {
    'Date': '2009-03-26',
    'Raw': 22,
    'Raw2': 25.03,
    'Asset': 'B'
  },
  {
    'Date': '2009-03-27',
    'Raw': 19,
    'Raw2': 24.42,
    'Asset': 'C'
  },
  {
    'Date': '2009-03-28',
    'Raw': 23,
    'Raw2': 24.28,
    'Asset': 'D'
  }
]

var margin = {
  top: 30,
  right: 50,
  bottom: 30,
  left: 50
};
var svgWidth = 600;
var svgHeight = 1000;
var graphWidth = svgWidth - margin.left - margin.right;
var graphHeight = svgHeight - margin.top - margin.bottom;
// var parseDate = d3.timeParse("%d/%m/%Y");
var parseDate = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime().range([0, graphWidth]);
var y = d3.scaleLinear().range([graphHeight, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10); // for colours
var xAxis = d3.axisBottom().scale(x).ticks(10);
var yAxis = d3.axisLeft().scale(y).ticks(10);

// Need to create the lines manually for each bit of data
var line = d3.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.y);
  });

// Creates the SVG area within the div on the dom 
// Just doing this once 
var svg = d3.select("#graphDiv")
  .append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight)
var g = svg.append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")")
  .call(d3.zoom().on("zoom", function() {
    svg.attr("transform", d3.event.transform)
  }));

// Add the X Axis
g.append("g").attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(xAxis);
// Text label for x axis 
g.append("text")
  .style("text-anchor", "middle")
  .text("timeseries dates")
  .attr("transform", "translate(" + (graphWidth / 2) + " ," + (graphHeight + margin.top) + ")");

// Add the Y Axis
g.append("g")
  .attr("class", "y axis")
  .call(yAxis);
// text label for the y axis
g.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left)
  .attr("x", 0 - (graphHeight / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("price points");


function drawGraph(data_set) {

  let pathData = []
  //assume 2 paths
  pathData.push([])
  pathData.push([])

  // Pass in the data here 
  data_set.forEach(function(d) {

    let path0 = {}
    let path1 = {}

    path0.date = parseDate(d.Date)
    path1.date = parseDate(d.Date)

    path0.y = +d.Raw
    path1.y = +d.Raw2

    pathData[0].push(path0)
    pathData[1].push(path1)

  });

  x.domain(d3.extent(data_set, function(d) {
    return parseDate(d.Date);
  }));
  y.domain([
    d3.min(data_set, function(d) {
      return Math.min(d.Raw, d.Raw2)
    }),
    d3.max(data_set, function(d) {
      return Math.max(d.Raw, d.Raw2)
    })
  ]);

  var lines = g.selectAll(".path")
    .data(pathData)

  lines.exit().remove()

  var enter = lines.enter()
    .append("path")
    .attr("class", "path")
    .style("stroke", (d, i) => z(i))

  var merge = enter.merge(lines)
    .attr("d", line)

}

// display initial chart
window.onload = drawGraph(data_set)
// Push new data every 5 seconds for a specific date
var h = setInterval(function() {
  data_set.push({
    'Date': '2009-03-29',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-03-30',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-03-31',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-01',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-02',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-03',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  });
  drawGraph(data_set);
}, 5000);
</script>
</body>```

Answer 1

您的代码中有几个问题：

您没有更新轴。结果，您的x轴显示的是2000年1月的日期，而不是2009年3月/ 4月的日期。要解决此问题，您必须将drawGraph函数中的轴更新为：
```
svg.selectAll('.x.axis').call(xAxis);
svg.selectAll('.y.axis').call(yAxis);
```

您使用setInterval进行的测试会在循环的第一次迭代后不断重复发送具有相同日期的数据。结果，您的data_set将相同日期的数据传递到您的pathData中。要解决此问题，最好将测试构建为：

let newdata = [{
  'Date': '2009-03-29',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}, {
  'Date': '2009-03-30',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}, {
  'Date': '2009-03-31',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}, {
  'Date': '2009-04-01',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}, {
  'Date': '2009-04-02',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}, {
  'Date': '2009-04-03',
  'Raw': Math.floor(Math.random() * 50),
  'Raw2': Math.floor(Math.random() * 25),
  'Asset': 'A'
}
]

let counter = 0;
// Push new data every 5 seconds for a specific date
var h = setInterval(function () {
  if (counter < newdata.length) { // this limits the steps to only the length of the newdata
   data_set.push(newdata[counter]);
   counter++;
   drawGraph(data_set);
  }
}, 3000);

Working block here。

但是，如果您希望新数据输入的日期相同，则必须使用以下命令在data_set中调用drawGraph之前更新setInterval：< / p>

    // Push new data every 5 seconds for a specific date
    var h = setInterval(function () {
      //obtain the index from the data_set for the same date
      let index = data_set.findIndex((f) => f.Date === newdata[counter].Date);
      if (index === -1) { // if data with same date not found push the new data
        data_set.push(newdata[counter]);
      } else { //else if it is found replace the old data
        data_set[index] = newdata[counter];
      }
      counter++;
      drawGraph(data_set);
    }, 3000);

Working Block Here。注意，在此示例中，newdata在旧日期的末尾还包含更多数据。因此，您将看到行根据新日期上下跳动。

d3js-如何为多组可以更新的项目绘制多折线图图表？

1 个答案: