d3.js 数据丢失，我该如何解决？

Question

我使用 data() 绘制与 data.length 一样多的线条，但它不起作用。 但是，如果我将 lint 更改为圆元素，则元素编号是正确的。 我不知道如何修复它。

inner_svg
.selectAll('line')
.data(data)
.enter()
.append('line')

代码只画了 28 行，但是 data.length 是 44。

inner_svg
.selectAll('circle')
.data(data)
.enter()
.append('circle')

如果我更改代码，则会绘制 44 个圆圈。

Answer 1

这可能是因为您在 SVG 中已经有 16 行了。

选择.输入（）

返回输入选择：选择中没有对应 DOM 元素的每个数据的占位符节点。 （对于 selection.data 未返回的选择，输入选择为空。）

演示该问题的代码段：-

 var data = [1,2,3,4,5]; var svg = d3.select("svg"); // svg.selectAll('line') returns two existing lines. svg.selectAll('line') .data(data) .enter() //Appends 5-2=3 lines .append('line') .attr("x1",10) .attr("x2",100) .attr("y1",function(d,i){ return (i+1)*50; }) .attr("y2",function(d,i){ return (i+1)*50; });

 line{ stroke: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg height=400 width=400> <!-- Two lines --> <line x1=10 x2=10 y1=0 y2=30></line> <line x1=30 x2=30 y1=0 y2=30></line> </svg>

解决此类问题的最佳方法是使用更窄的选择器。 例如，您可以为新行添加一个特定的类，如下所示，并将其用作选择器。

 svg.selectAll('.link') //Select by class name
    .data(data)
    .enter()
    .append('line')
    .attr("class","link") //Adding class link
    .attr("x1",10)
    .attr("x2",100)
    .attr("y1",function(d,i){ return (i+1)*50; })
    .attr("y2",function(d,i){ return (i+1)*50; });

 var data = [1,2,3,4,5]; var svg = d3.select("svg"); svg.selectAll('.link') .data(data) .enter() .append('line') .attr("class","link") .attr("x1",10) .attr("x2",100) .attr("y1",function(d,i){ return (i+1)*50; }) .attr("y2",function(d,i){ return (i+1)*50; });

 line{ stroke: black; } .link{ stroke: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg height=400 width=400> <!-- Two lines --> <line x1=10 x2=10 y1=0 y2=30></line> <line x1=30 x2=30 y1=0 y2=30></line> </svg>