Question

我正在尝试渲染多行，其中x，y轴为数据行数据集中5个数组中每个数组的第1个，第2个值。我希望通过嵌套数据行数据集中的每个第3个元素，为所有5个数组中的第3个元素的0,15,1007值生成3个不同的行。

我尝试了什么：https://jsfiddle.net/data_x/23143n3r/

我跟着http://bl.ocks.org/d3noob/d8be922a10cb0b148cd5。

重要代码：

var line = d3.svg.line()
            .x(function(d,i){return x(datarow[i][0]);})
            .y(function(d,i){return y(datarow[i][1]);})
            .interpolate("linear");


  //Nest the entries 
 var nest = d3.nest()   
              .key( function(d) { return d[2]})    
              .entries(datarow);  

 //Loop through each d[2]
    nest.forEach(
        function(d,i)
        {

            svg.append("path")
                .attr("class", "line")               
                .attr("d",  line(d.values[0][2]))
                .style("stroke-width", 1)
                .style("stroke", "steelblue")
                .style("fill", "none")
        }
    );

在上面的代码中，d.values [0]返回所有数组元素。因为我想在每个数组中为第3个值绘制多行，我在每个数组中返回第3个元素。但是，我仍然无法弄清楚为什么没有渲染。

感谢任何帮助或提示，

谢谢，

Answer 1

在朋友的帮助下，

问题出在

      `var line = d3.svg.line()
        .x(function(d,i){return x(datarow[i][0]);})
        .y(function(d,i){return y(datarow[i][1]);})
        .interpolate("linear");`

虽然它应该像

                       d3.svg.line()
                             .x(function(d){return x(d[0]);})
                              .y(function(d){return y(d[1]);})
                              .interpolate("linear");`

第x行，第x行附件函数将值数组作为输入而不是单个值。

[帮助]：多行与d3.nest（）不渲染线条

1 个答案: