无法在我的d3条形图中添加任何内容

Question

Here是我的条形图的简化版本。我似乎无法添加任何东西。我正在关注this教程，试图将x轴的垂直线和每个柱内的文本添加到我的图形中，两者都没有显示出来。基本上我没有真正显示我尝试添加，但我能够添加你可以在graph.js @ line 65中看到的x轴线。你可以看到我尝试在我的代码中添加行到图表的位置在graph.js中有56个。 x值是任意的，因为我只是试图让它们出现。我做错了什么？

Answer 1

问题是您的选择器“行”不够具体。文件中已有“线”元素;它们形成轴刻度。

因此，您的代码正在执行以下操作。它选择现有的线元素并将您提供的数据绑定到这些元素。由于这些元素已经存在，因此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。