javascript - 无法向我的 d3 条形图添加任何内容

Question

这是我的条形图的一个简化的、面向公众的版本。我似乎无法添加任何东西。我正在按照本教程尝试将 x 轴的垂直线和每个条形图内的文本添加到我的图表中，但两者都没有显示。基本上没有真正显示我尝试添加的内容，但我能够添加您可以在 graph.js @ line 65 中看到的 x 轴线。您可以在代码中看到我尝试在图中添加线条的位置 line graph.js 中的 56 个。x 值是任意的，因为我只是想让它们显示出来。我究竟做错了什么？

Answer 1

问题是您的选择器“line”不够具体。文档中已经有 'line' 元素；它们形成轴刻度。

因此，您的代码正在执行以下操作。它选择现有的线元素并将您提供的数据绑定到这些元素。由于这些元素已经存在，因此 enter() 选择将为空。这意味着您的 append("line") 命令将永远不会被执行：

        var lines = svg.selectAll("line")
            .data(data)
            .enter().append("line")

您可以通过添加一个类来提供更多的特异性。例如以下应该工作：

var lines = svg.selectAll("line.rules")
    .data(data)
  .enter().append("line")
    .attr("class", "rules");

有关进入、更新和退出选择的更多信息，请参阅 Mike 的文章Thinking with Joins。