转换数据以使用d3绘制多条线

时间:2013-05-02 02:32:55

标签: javascript d3.js graphing

我有这样的数据集

[[[{"2001-1":{"cow":2.64,"dog":2.90,"Lemur":0.0,"Lion":2.77,"Tiger":2.31,"bird":3.21}}]],
[[{"2002-3":{"cow":2.54,"dog":2.67,"Lemur":0.0,"Lion":2.93,"Tiger":0.0,"bird":0.0,}}]]] 

第一个数组是X值,第二个数组是Y值。如何生成每个键表示为一行的图表。更具体地说,我如何将数据转换为D3可以使用的可接受格式?

我试过这个

var w=400,h=200;
var x=d3.scale.linear().domain([0,dataset.length]).range([0,4]);
var y=d3.scale.linear().domain([0,d3.max(dataset)]).rangeRound([0,h]);
var entries=d3.entries(dataset);
var colors = d3.scale.category20().domain(d3.keys(dataset));
var line=d3.svg.line().interpolate("basis")
        .x(function(d){return x(d.range);})
        .y(function(d){return x(d.range);});

var svg=d3.select("#p-graph")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h);

        svg.selectAll(".line")
            .data(entries)
            .enter().append("path")
            .attr("class", "line")
            .attr("d",function(d){return line(d.value);})
            .attr("stroke",function(d){return colors(d.key);});

但输出中没有显示任何内容。我做得不好?

更新

每只动物应在图表上代表一行。

0 个答案:

没有答案