Question

我有以下代码可以很好地工作，除非我遍历我的数据集，第一行（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)显示我的第二行数据之后的所有行 - 它会删除第一行。

欢迎任何建议。

Answer 1

我在使用类似代码时遇到了同样的问题，并根据Lars Kothoff的评论对其进行了修正。

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

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

你也可以用一个类区分rects：

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

Answer 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 = James

i = 1data = Sue

i = 2data = Ben

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

...[previous code]

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

</body>

...[previous code]

d3.data跳过第一行数据

2 个答案: