D3.data пропускает первую строку данных

У меня есть следующий код, который отлично работает, кроме случаев, когда я повторяю свой набор данных, первая строка (индекс 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) показывает все строки после и включая мою вторую строку данных - она отбрасывает первую строку.

Любые предложения приветствуются.

Ответ 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");

Ответ 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]