17

我的以下代码效果很好，除了当我遍历我的数据集时，第一行（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)在我的第二行数据之后（包括我的第二行数据）显示所有行 - 它删除了第一行。

欢迎任何建议。

4

2 回答 2

14

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

在我的情况下，更改selectAll以在 ag 元素上工作是有意义的，更像是这样：

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");
于 2014-07-09T02:03:05.477 回答
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>

生产

我=0数据=詹姆斯

我=1数据=苏

我=2数据=本

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

...[previous code]

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

</body>

...[previous code]
于 2017-03-21T15:00:17.057 回答