d3.js多系列圖與JSON

Question

我已經從視圖中的這些模型解析JSON到JsonResponse，現在我正在嘗試使用d3.js工作我的多線圖。

我試圖使用的示例代碼是here。

我不知道如何去改變tsv調用，或者如果我應該改變我的JSON格式。

d3.tsv("data.tsv", function(error, data) { 
    if (error) throw error; 

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    }); 

    var cities = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, temperature: +d[name]}; 
     }) 
    }; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 

    y.domain([ 
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }), 
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); }) 
    ]); 

這裏是我的JSON是如何格式化其中Site名是頂級水平，同時，`公制是一個級別深度。

{ "Site1": 
     [{"da": 1.0, "date": 2015-09-01}, 
     {"da": 2.0, "date": 2015-09-04}], 
    "Site2": 
     [{"da": 1.0, "date": 2015-09-01}, 
     {"da": 2.0, "date": 2015-09-04} 
     {"da": 5.0, "date": 2015-09-04}] 
} 

如何設置d3.js以使用這些嵌套的JSON對象與示例中的頂級JSON？

Answer 1

下面是完整的工作代碼小提琴在代碼中添加註釋以幫助您理解代碼。

Fiddle

完整的代碼片段：

var margin = { 
    top: 20, 
    right: 80, 
    bottom: 30, 
    left: 50 
}, 
width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y-%m-%d").parse; 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

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

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function (d) { 
    return x(d.date); 
}) 
    .y(function (d) { 
    return y(d.da); 
}); 

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 + ")"); 
//your dataset 
var myData = { 
    "Site1": [{ 
     "da": 1.0, 
      "date": "2015-09-01" 
    }, { 
     "da": 2.0, 
      "date": "2015-09-04" 
    }], 
     "Site2": [{ 
     "da": 1.0, 
      "date": "2015-09-01" 
    }, { 
     "da": 2.0, 
      "date": "2015-09-04" 
    }, { 
     "da": 5.0, 
      "date": "2015-09-04" 
    }] 
}; 
//make fulldataset to get the extent of x axis and yaxis 
var fullDataSet = [] 
for (var key in myData) { 
    fullDataSet = fullDataSet.concat.apply(fullDataSet, myData[key]); 
} 
fullDataSet.forEach(function (d) { 
    d.date = parseDate(d.date); 
    d.da = +d.da; 
}); 
//get the xaxis extent i.e. min max 
x.domain(d3.extent(fullDataSet, function (d) { 
    return d.date; 
})); 
//get the yaxis extent i.e. min max 
y.domain(d3.extent(fullDataSet, function (d) { 
    return d.da; 
})); 
//make teh x axis 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 
//make teh y axis 
svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("DA "); 
//iterate through your nested data and make the line graph 
for (var key in myData) { 
    makeLine(myData[key], key); 
} 

//This function will make the line chart 
function makeLine(data, title) { 
    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .style("stroke", function (d) { 
     return color(title); 
    }).attr("d", line); 
}