使用D3問題的多線圖表

Question

我正在使用D3創建一個多線圖。 我已經編寫了代碼但是沒有顯示兩行，只有一行來了，我無法弄清楚這個問題的原因。

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var z = d3.scale.category20c(); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ"); var data = [{ data: [ ["2016-01-20T05:31:17.000Z", 95.9, {}], ["2016-01-20T05:31:47.000Z", 95.9, {}], ["2016-01-20T05:32:17.000Z", 95.4, {}], ["2016-01-20T05:32:47.000Z", 96.1, {}], ["2016-01-20T05:33:17.000Z", 95.7, {}], ["2016-01-20T05:33:47.000Z", 95.9, {}], ["2016-01-20T05:34:17.000Z", 95.5, {}], ["2016-01-20T05:34:47.000Z", 95.9, {}], ["2016-01-20T05:35:17.000Z", 95.8, {}], ["2016-01-20T05:35:47.000Z", 95.9, {}], ["2016-01-20T05:36:17.000Z", 95.7, {}], ["2016-01-20T05:36:47.000Z", 95.7, {}], ["2016-01-20T05:37:17.000Z", 95.9, {}], ["2016-01-20T05:37:47.000Z", 95.5, {}], ["2016-01-20T05:38:17.000Z", 95.4, {}], ["2016-01-20T05:38:47.000Z", 95.8, {}], ["2016-01-20T05:39:17.000Z", 96.0, {}], ["2016-01-20T05:39:47.000Z", 96.1, {}], ["2016-01-20T05:40:17.000Z", 95.8, {}], ["2016-01-20T05:40:47.000Z", 96.0, {}], ["2016-01-20T05:41:17.000Z", 95.9, {}], ["2016-01-20T05:41:47.000Z", 94.9, {}], ["2016-01-20T05:42:17.000Z", 95.8, {}], ["2016-01-20T05:42:47.000Z", 95.9, {}], ["2016-01-20T05:43:17.000Z", 95.8, {}], ["2016-01-20T05:43:47.000Z", 96.0, {}], ["2016-01-20T05:44:17.000Z", 95.7, {}], ["2016-01-20T05:44:47.000Z", 96.0, {}], ["2016-01-20T05:45:17.000Z", 95.9, {}], ["2016-01-20T05:45:47.000Z", 96.0, {}], ["2016-01-20T05:46:17.000Z", 95.8, {}], ["2016-01-20T05:46:47.000Z", 96.0, {}], ["2016-01-20T05:47:17.000Z", 95.7, {}], ["2016-01-20T05:47:47.000Z", 96.2, {}], ["2016-01-20T05:48:17.000Z", 95.8, {}], ["2016-01-20T05:48:47.000Z", 95.9, {}], ["2016-01-20T05:49:17.000Z", 95.7, {}], ["2016-01-20T05:49:47.000Z", 95.9, {}], ["2016-01-20T05:50:18.000Z", 95.7, {}], ["2016-01-20T05:50:48.000Z", 95.8, {}], ["2016-01-20T05:51:18.000Z", 95.7, {}], ["2016-01-20T05:51:48.000Z", 95.9, {}], ["2016-01-20T05:52:18.000Z", 95.5, {}], ["2016-01-20T05:52:48.000Z", 95.9, {}], ["2016-01-20T05:53:18.000Z", 95.8, {}], ["2016-01-20T05:53:48.000Z", 95.9, {}], ["2016-01-20T05:54:18.000Z", 95.7, {}], ["2016-01-20T05:54:48.000Z", 95.9, {}], ["2016-01-20T05:55:18.000Z", 95.8, {}], ["2016-01-20T05:55:48.000Z", 95.8, {}], ["2016-01-20T05:56:18.000Z", 95.6, {}], ["2016-01-20T05:56:48.000Z", 95.7, {}], ["2016-01-20T05:57:18.000Z", 95.7, {}], ["2016-01-20T05:57:48.000Z", 95.8, {}], ["2016-01-20T05:58:18.000Z", 95.7, {}], ["2016-01-20T05:58:48.000Z", 95.7, {}], ["2016-01-20T05:59:18.000Z", 95.6, {}], ["2016-01-20T05:59:48.000Z", 95.8, {}], ["2016-01-20T06:00:18.000Z", 95.7, {}], ["2016-01-20T06:00:48.000Z", 95.7, {}], ["2016-01-20T06:01:18.000Z", 95.6, {}], ["2016-01-20T06:01:48.000Z", 95.7, {}], ["2016-01-20T06:02:18.000Z", 95.8, {}], ["2016-01-20T06:02:48.000Z", 95.8, {}], ["2016-01-20T06:03:18.000Z", 95.8, {}], ["2016-01-20T06:03:48.000Z", 95.8, {}], ["2016-01-20T06:04:18.000Z", 95.8, {}], ["2016-01-20T06:04:48.000Z", 95.8, {}], ["2016-01-20T06:05:18.000Z", 95.7, {}], ["2016-01-20T06:05:48.000Z", 95.7, {}] ], label: "a" }, { data: [ ["2016-01-20T05:31:17.000Z", 95.9, {}], ["2016-01-20T05:31:47.000Z", 95.9, {}], ["2016-01-20T05:32:17.000Z", 95.4, {}], ["2016-01-20T05:32:47.000Z", 96.1, {}], ["2016-01-20T05:33:17.000Z", 95.7, {}], ["2016-01-20T05:33:47.000Z", 95.9, {}], ["2016-01-20T05:34:17.000Z", 95.5, {}], ["2016-01-20T05:34:47.000Z", 95.9, {}], ["2016-01-20T05:35:17.000Z", 95.8, {}], ["2016-01-20T05:35:47.000Z", 95.9, {}], ["2016-01-20T05:36:17.000Z", 95.7, {}], ["2016-01-20T05:36:47.000Z", 95.7, {}], ["2016-01-20T05:37:17.000Z", 95.9, {}], ["2016-01-20T05:37:47.000Z", 95.5, {}], ["2016-01-20T05:38:17.000Z", 95.4, {}], ["2016-01-20T05:38:47.000Z", 95.8, {}], ["2016-01-20T05:39:17.000Z", 96.0, {}], ["2016-01-20T05:39:47.000Z", 96.1, {}], ["2016-01-20T05:40:17.000Z", 95.8, {}], ["2016-01-20T05:40:47.000Z", 96.0, {}], ["2016-01-20T05:41:17.000Z", 95.9, {}], ["2016-01-20T05:41:47.000Z", 94.9, {}], ["2016-01-20T05:42:17.000Z", 95.8, {}], ["2016-01-20T05:42:47.000Z", 95.9, {}], ["2016-01-20T05:43:17.000Z", 95.8, {}], ["2016-01-20T05:43:47.000Z", 96.0, {}], ["2016-01-20T05:44:17.000Z", 95.7, {}], ["2016-01-20T05:44:47.000Z", 96.0, {}], ["2016-01-20T05:45:17.000Z", 95.9, {}], ["2016-01-20T05:45:47.000Z", 96.0, {}], ["2016-01-20T05:46:17.000Z", 95.8, {}], ["2016-01-20T05:46:47.000Z", 96.0, {}], ["2016-01-20T05:47:17.000Z", 95.7, {}], ["2016-01-20T05:47:47.000Z", 96.2, {}], ["2016-01-20T05:48:17.000Z", 95.8, {}], ["2016-01-20T05:48:47.000Z", 95.9, {}], ["2016-01-20T05:49:17.000Z", 95.7, {}], ["2016-01-20T05:49:47.000Z", 95.9, {}], ["2016-01-20T05:50:18.000Z", 95.7, {}], ["2016-01-20T05:50:48.000Z", 95.8, {}], ["2016-01-20T05:51:18.000Z", 95.7, {}], ["2016-01-20T05:51:48.000Z", 95.9, {}], ["2016-01-20T05:52:18.000Z", 95.5, {}], ["2016-01-20T05:52:48.000Z", 95.9, {}], ["2016-01-20T05:53:18.000Z", 95.8, {}], ["2016-01-20T05:53:48.000Z", 95.9, {}], ["2016-01-20T05:54:18.000Z", 95.7, {}], ["2016-01-20T05:54:48.000Z", 95.9, {}], ["2016-01-20T05:55:18.000Z", 95.8, {}], ["2016-01-20T05:55:48.000Z", 95.8, {}], ["2016-01-20T05:56:18.000Z", 95.6, {}], ["2016-01-20T05:56:48.000Z", 95.7, {}], ["2016-01-20T05:57:18.000Z", 95.7, {}], ["2016-01-20T05:57:48.000Z", 95.8, {}], ["2016-01-20T05:58:18.000Z", 95.7, {}], ["2016-01-20T05:58:48.000Z", 95.7, {}], ["2016-01-20T05:59:18.000Z", 95.6, {}], ["2016-01-20T05:59:48.000Z", 95.8, {}], ["2016-01-20T06:00:18.000Z", 95.7, {}], ["2016-01-20T06:00:48.000Z", 95.7, {}], ["2016-01-20T06:01:18.000Z", 95.6, {}], ["2016-01-20T06:01:48.000Z", 95.7, {}], ["2016-01-20T06:02:18.000Z", 95.8, {}], ["2016-01-20T06:02:48.000Z", 95.8, {}], ["2016-01-20T06:03:18.000Z", 95.8, {}], ["2016-01-20T06:03:48.000Z", 95.8, {}], ["2016-01-20T06:04:18.000Z", 95.8, {}], ["2016-01-20T06:04:48.000Z", 95.8, {}], ["2016-01-20T06:05:18.000Z", 95.7, {}], ["2016-01-20T06:05:48.000Z", 95.7, {}] ], label: "b" }] var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .interpolate("monotone") .x(function(d) { return x(parseDate.parse(d[0])); }) .y(function(d) { return y(d[1]); }); var ary = []; data.forEach(function(d) { ary.push(d.data); }); x.domain(d3.extent(d3.merge(ary), function(d) { return parseDate.parse(d[0]); })); y.domain([ d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[1]; }); }), d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[1]; }); }) ]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); var series = svg.selectAll(".series") .data(data) .enter().append("g") .attr("class", "series"); series.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.data); }) .style("stroke", function(d, i) { return z(i); }); 

 text.inner-circle { font-weight: 400; font-size: 12px; text-transform: uppercase; } text.inner-text { font-weight: 400; font-size: 36px; font-family: 'Metric Regular', 'Metric'; text-align: center; font-style: normal; text-transform: uppercase; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 2; shape-rendering: crispEdges; } .grid .tick { stroke: lightgrey; stroke-opacity: 0.7; shape-rendering: crispEdges; } .grid path { stroke-width: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

請幫我弄清楚我做錯了什么。

碼

Answer 1

你只是錯過了一個'回歸'

x.domain(d3.extent(d3.merge(ary), function(d) {
  parseDate.parse(d[0]);
}));

應該

x.domain(d3.extent(d3.merge(ary), function(d) {
  return parseDate.parse(d[0]);
}));

Answer 2

您在計算域時忘記返回parseDate值。

x.domain(d3.extent(d3.merge(ary), function(d) {
  return parseDate.parse(d[0]);
}));

https://jsfiddle.net/ermineia/jt5nnx5h/

Answer 3

如果更改數據中的值，您將看到有兩行。

還可以嘗試為您的線條添加顏色，以便更好地區分它們：

var color = d3.scale.category10();

series.append("path")
  .attr("class", "line")
  .attr("d", function(d) {
    return line(d.data);
  })
  .style("stroke", function(d, i) {
    return color(i);
  });