多行与d3.js

Question

我想用d3.js做一个多行图表，但我不明白。

这是我的console.log（数据）：

Array 
(
    [0] => [{"x":"0","y":"35"},{"x":"1","y":"34"},{"x":"2","y":"36"},{"x":"3","y":"35"},{"x":"4","y":"40"},{"x":"5","y":"35"},{"x":"6","y":"37"},{"x":"7","y":"40"},{"x":"8","y":"45"},{"x":"9","y":"46"},{"x":"10","y":"55"},{"x":"11","y":"63"},{"x":"12","y":"61"},{"x":"13","y":"45"},{"x":"14","y":"48"},{"x":"15","y":"49"},{"x":"16","y":"45"},{"x":"17","y":"44"},{"x":"18","y":"52"},{"x":"19","y":"43"},{"x":"20","y":"37"},{"x":"21","y":"36"},{"x":"22","y":"37"},{"x":"23","y":"34"}] 
    [1] => [{"x":"0","y":"10"},{"x":"1","y":"15"},{"x":"2","y":"13"},{"x":"3","y":"15"},{"x":"4","y":"14"},{"x":"5","y":"16"},{"x":"6","y":"17"},{"x":"7","y":"25"},{"x":"8","y":"23"},{"x":"9","y":"24"},{"x":"10","y":"25"},{"x":"11","y":"28"},{"x":"12","y":"27"},{"x":"13","y":"21"},{"x":"14","y":"23"},{"x":"15","y":"19"},{"x":"16","y":"18"},{"x":"17","y":"16"},{"x":"18","y":"15"},{"x":"19","y":"14"},{"x":"20","y":"15"},{"x":"21","y":"16"},{"x":"22","y":"15"},{"x":"23","y":"16"}] 
    [2] => [{"x":"0","y":"45"},{"x":"1","y":"49"},{"x":"2","y":"49"},{"x":"3","y":"50"},{"x":"4","y":"54"},{"x":"5","y":"51"},{"x":"6","y":"54"},{"x":"7","y":"65"},{"x":"8","y":"68"},{"x":"9","y":"70"},{"x":"10","y":"80"},{"x":"11","y":"91"},{"x":"12","y":"88"},{"x":"13","y":"66"},{"x":"14","y":"71"},{"x":"15","y":"68"},{"x":"16","y":"63"},{"x":"17","y":"60"},{"x":"18","y":"67"},{"x":"19","y":"57"},{"x":"20","y":"52"},{"x":"21","y":"52"},{"x":"22","y":"52"},{"x":"23","y":"50"}] 
    [3] => [{"x":"0","y":"10"},{"x":"1","y":"15"},{"x":"2","y":"12"},{"x":"3","y":"5"},{"x":"4","y":"9"},{"x":"5","y":"15"},{"x":"6","y":"45"},{"x":"7","y":"125"},{"x":"8","y":"345"},{"x":"9","y":"256"},{"x":"10","y":"312"},{"x":"11","y":"345"},{"x":"12","y":"299"},{"x":"13","y":"165"},{"x":"14","y":"354"},{"x":"15","y":"368"},{"x":"16","y":"254"},{"x":"17","y":"213"},{"x":"18","y":"312"},{"x":"19","y":"165"},{"x":"20","y":"54"},{"x":"21","y":"32"},{"x":"22","y":"10"},{"x":"23","y":"5"}] 
    [4] => [{"x":"0","y":"2"},{"x":"1","y":"3"},{"x":"2","y":"2"},{"x":"3","y":"1"},{"x":"4","y":"1"},{"x":"5","y":"2"},{"x":"6","y":"3"},{"x":"7","y":"15"},{"x":"8","y":"45"},{"x":"9","y":"27"},{"x":"10","y":"40"},{"x":"11","y":"42"},{"x":"12","y":"35"},{"x":"13","y":"18"},{"x":"14","y":"42"},{"x":"15","y":"40"},{"x":"16","y":"30"},{"x":"17","y":"25"},{"x":"18","y":"40"},{"x":"19","y":"20"},{"x":"20","y":"6"},{"x":"21","y":"4"},{"x":"22","y":"2"},{"x":"23","y":"1"}] 
) 

正如你可以看到，[0]〜[4]是5条不同的线， x是x轴为时间，Y作为数据。

这是我的JS在我插入绘图代码 （正如你可以看到我从一个php文件调用者dataOutEvo.php获取数据）

$(document).ready(function(){ 

    $.ajax({  
    url: 'dataOutEvo.php',  
    success: function(data) {  

    // -------- HERE ----------- 

    } 

    }); 


}); 

其实，我应该使用d3.js或它是另一个图书馆，它可以完成多行和多列条形图（我将在后面需要），并且可以轻松使用我的数据格式？

Answer 1

前几天我正在处理类似的问题。看看这个JSFiddle，让我知道你在想什么。我试图对它进行注释，但我不想花太多时间来解释自己。

http://jsfiddle.net/GV5kK/3/

这里的关键部分：

//Create our SVG object. 
var svg = d3.select("body").append("svg") 
    .attr("id", "svgdiv") 
    .attr("width", width+70) 
    .attr("height", height+70) 
    .append("g") 
    .attr("transform", "translate(" + 30 + "," + 30 + ")"); 



//Call the Axis constructors and append them to the SVG object 
svg.append("g") 
    .attr("class", "xaxis axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxisConstructor); 

svg.append("g") 
    .attr("class", "yaxis axis") 
    .call(yAxisConstructor); 

//Join the different arrays in var data to a new set of tags each classed as ".lines". 
var topic = svg.selectAll(".lines") 
    .data(data) 
    .enter().append("g"); 

//Go through an array of ".lines" and append the different attributes, including "d" which determines the line's path. 
topic.append("path") 
    .attr("class", "topicline") 
    .attr("d", lineConstructor) 
.style("stroke", function(d,i) { return colorscale(i); }) 
    .style('stroke-width', 3) 
    .style('fill-opacity', 0);