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

Question

我使用data（）绘制与data.length一样多的行，但它不起作用。但是如果我将lint更改为circle元素，则元素编号是正确的。我不知道如何解决它。

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元素。 （输入选择是   对于choose.data未返回的选择为空。）

演示此问题的代码段： -

＆＃13;

＆＃13;

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; });

＆＃13;

line{
  stroke: black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

 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; });

＆＃13;

＆＃13;

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; });

＆＃13;

line{
  stroke: black;
}

.link{
  stroke: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;