Question

我在d3.js中绘制了一些svg行我用这种方式设置它而不是使用d3.svg.line（），这样每一行都是独立的，我可以为每个行提供一个独特的类。但是，我的线条没有显示，因为它们没有获取y2属性。

来自控制台的屏幕截图：

有关如何使其发挥作用的任何想法？

代码：

    <!DOCTYPE html>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

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

    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 + ")");

    d3.csv("data.csv", function(error, data){

          svg.selectAll("line")
          .data(data)
          .enter().append("svg:line")
              .attr("x1", function(d, i) { return data[i].x })
              .attr("y1", function(d, i) { return data[i].y})
              .attr("x2", function(d, i) { return data[i+1].x})
              .attr("y2", function(d, i) { return data[i+1].y})
              .attr("fill", "none")
              .attr("stroke", "red")
              .attr("class", function(d,i){return "line" + i;});
    });

    </script>

Here is a Plunker，其中还包含数据。

Answer 1

您的x2和y2函数将在数组中的最终对象上出错，因为它们正在尝试访问不存在的下一行。例如，你的array.length是258，你在第257行; x2和y2函数将尝试访问不存在的行258。尝试：

svg.selectAll("line")
      .data(data)
      .enter().append("svg:line")
          .attr("x1", function(d, i) { return data[i].x; })
          .attr("y1", function(d, i) { return data[i].y; })
          .attr("x2", function(d, i) {

            // this the fix
            // if there is a line at i+1 we will use it
            // otherwise use the line at index 0
            return data[i+1] ? data[i+1].x : data[ 0 ].x ;

          })
          .attr("y2", function(d, i) {

            // same as above but for y
            return data[i+1] ? data[i+1].y : data[ 0 ].y ;

          })
          .attr("fill", "none")
          .attr("stroke", "red")
          .attr("class", function(d,i){return "line" + i;});

来自csv的D3中的svg行（作为单独的行而不是单行） - 不显示

1 个答案: