javascript - D3.js - 数组的第一个值丢失

Question

我有一个非常基本的 D3.js 示例，我很困惑。

const arr = [20, 30, 50]

const paragraphs = d3.select("body")
  .data(arr)
  .enter()
  .append("p")
  .text(function(d) {
    return d
  })

<script src="https://d3js.org/d3.v5.min.js"></script>

我希望 enter 方法为数组中的每个元素创建一个占位符。然而，第一个元素似乎迷路了，我不明白为什么。这种行为的原因是什么，我该如何解决？

Answer 1

您需要调用data(arr)选择的节点（尚不存在）。然后将数据绑定到此占位符选择。

const arr = [20, 30, 50]

const paragraphs = d3.select("body").selectAll("p")
  .data(arr)
  .enter()
  .append("p")
  .text(function(d) {
    return d
  })

<script src="https://d3js.org/d3.v5.min.js"></script>