d3.data 跳过第一行数据答案

【问题标题】：d3.data skipping the first row of datad3.data 跳过第一行数据
【发布时间】：2013-10-11 13:02:40
【问题描述】：

我的以下代码运行良好，但当我遍历我的数据集时，第一行（0 索引）被跳过。

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x",function(d){
    console.log(data);
    console.log(d);
    return xScale(d.year-1980);
  })

注意console.log(data) 返回我的完整数据集，包括第一行，所以数据就在那里！

但是console.log(d) 显示了我的第二行数据之后的所有行，包括我的第二行数据 - 它删除了第一行。

欢迎提出任何建议。

【问题讨论】：

我猜你在运行该代码时已经有一个rect 元素。此元素与第一个数据行匹配，因此.enter() 选择丢失了它。
D3 非常强大但又过于庞大。它也没有被广泛使用或出版。它完全利用了 javascript 的力量。希望我们有更多关于 D3 的教程
将 console.log(data) 移到 x 函数 (d) 之外。它为每个 d 打印。也许，你错过了。然后，发布您的一些输出。
感谢@LarsKotthoff，您至少节省了我几个小时的时间！
我发现这也是一个救命稻草。花了一些时间来进行搜索。 d3 selectall .data skipping first element 没删。

标签： d3.js

【解决方案1】：

我在使用类似代码时遇到了同样的问题，并根据Lars Kothoff 的评论修复了它。

在我的情况下，将 selectAll 更改为处理 g 元素是有意义的，更像这样：

svg.selectAll("g")
    .data(data);
    .enter()
    .append("g")
    .append("rect")
    .attr("x",function(d) { return xScale(d.year-1980); });

你也可以用一个类来区分矩形：

svg.selectAll("rect.year")
    .data(data)
    .enter()
    .append("rect")
    .attr("x",function(d){ return xScale(d.year-1980); })
    .classed("year");

【讨论】：

底层方法是最简单的解决方案。好的。只需将selectAll("rect") 更改为selectAll("rect.year")

【解决方案2】：

是的，如果已经有一个元素，它会被 .enter()“跳过”

<html>
<head>

<title>D3 Test</title>
</head>

<body>

</body>

<script type='text/javascript' src='https://d3js.org/d3.v4.min.js'></script>
<script type='text/javascript'> 

var theData = ["James", "Sue", "Ben"]

var p = d3.select("body").selectAll("p")    
    .data(theData)
    .enter()
    .append('p')
    .text(function (d,i) {
      return " i =" + i + "data =" + d;
    });

</script>

</html>

生产

i =0data =詹姆斯

i =1data =苏

i =2data =本

但是如果你在那里添加一个 p 元素，它会跳过它。

...[previous code]

<body>
<p>Here is the first p tag that "James gets matched too"</p>

</body>

...[previous code]

【讨论】：