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 行。

selection.enter()

返回输入选择：每个基准的占位符节点 选择中没有对应的 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>