使用d3.js构建折线图

Question

我正在尝试按照本教程为JSON格式的数据生成简单的折线图：

[{"Machine":"S2","Data":[{"Percentage":0,"Week":33,"Year":2014,"Monday":"11/08/14","Items":0},{"Percentage":0,"Week":34,"Year":2014,"Monday":"18/08/14","Items":0},{"Percentage":0,"Week":35,"Year":2014,"Monday":"25/08/14","Items":0},{"Percentage":0,"Week":36,"Year":2014,"Monday":"01/09/14","Items":0},{"Percentage":1.141848548192784,"Week":37,"Year":2014,"Monday":"08/09/14","Items":2},{"Percentage":58.264732011508123,"Week":38,"Year":2014,"Monday":"15/09/14","Items":4},{"Percentage":0,"Week":39,"Year":2014,"Monday":"22/09/14","Items":0}]},{"Machine":"S3","Data":[{"Percentage":0,"Week":33,"Year":2014,"Monday":"11/08/14","Items":0},{"Percentage":0,"Week":34,"Year":2014,"Monday":"18/08/14","Items":0},{"Percentage":0,"Week":35,"Year":2014,"Monday":"25/08/14","Items":0},{"Percentage":0,"Week":36,"Year":2014,"Monday":"01/09/14","Items":0},{"Percentage":7.7532100624144213,"Week":37,"Year":2014,"Monday":"08/09/14","Items":15},{"Percentage":0,"Week":38,"Year":2014,"Monday":"15/09/14","Items":0},{"Percentage":0,"Week":39,"Year":2014,"Monday":"22/09/14","Items":0}]}]

这是我产生的代码：

function CreateOeeChart(json)
{
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time - this is causing me problems
var parseDate = d3.time.format("%d/%m/%Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var line = d3.svg.line()
    .x( function(d) { return x(d.Monday); })
    .y( function(d) { return y(d.Percentage); });

// Adds the svg canvas
var svg = d3.select("#oeeChart")
    .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 + ")");

// Modify date data
jsonString.forEach(function (d) {
    d.Data.forEach(function (v) {
        v.Monday = parseDate(v.Monday);
    });
});

// Scale the range of the data
x.domain(d3.extent(jsonString, function (d) {
    d.Data.forEach(function (v) {
        return v.Monday;
    });
}));
y.domain([0, 100]); 

// Loop through the json object and use line function to draw the lines
jsonString.forEach( function (d) {
    svg.append("path")
        .attr("class", "line")
        .attr("d", line(d.Data));
});

// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

}

当我尝试追加路径

 jsonString.forEach( function (d) {
    svg.append("path")
        .attr("class", "line")
        .attr("d", line(d.Data));

我收到“路径属性的值无效...”错误。 这是为什么？

Answer 1

使用这样的嵌套结构，您不能直接使用d3.extent来确定域。 您必须获取每个单独的嵌套数组的最小值和最大值，然后是总体最小值和最大值：

var min = d3.min(jsonString, function (d) {
  return d3.min(d.Data, function (v) {
    return v.Monday;
  });
});
var max = d3.max(jsonString, function (d) {
  return d3.max(d.Data, function (v) {
    return v.Monday;
  });
});
x.domain([min, max]);

在此处完成演示。 或者，您可以将日期数组压缩为单级数组，然后从中获取范围。