使用d3.js

Question

建立一個折線圖，我試圖按照this教程製作一個簡單的線圖表爲我的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.0624144213,"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]); 

完成演示here。或者，您可以將日期數組數組壓縮到單個級別的數組中，然後從中獲取範圍。