如何在d3 barChart演示第1部分中创建条形（或矩形）？

Question

我了解barchart source code的每一行。但是，除了使用div设置每个width的{​​{1}}的代码之外，我没有看到代码具体说“让我们制作条形或矩形”。

.style("width", function(d) { return x(d) + "px"; })

我的问题：

演示代码是一种生产条形图的快速而肮脏的方式吗？是否有使用d3创建矩形或条形的正式或标准方法？

由于

Answer 1

首先，那些不是矩形（作为SVG矩形），而只是div。这些div在CSS中具有矩形形状和背景颜色集，因此，它们看起来像矩形。大多数D3书籍（如朱，穆雷等）教授如何在转移到实际的SVG矩形之前用div制作图表。

但如果您不理解的是如何创建这些div（根据您的问题标题判断），代码就在这里：

d3.select(".chart")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div");

它说什么？我们来看看：

1. .selectAll("div")：这会选择所有“div”。但到目前为止还没有...所以，这只是一个占位符。然后：
2. .data(data)。这会绑定数据：数据为data。 data是一个包含6个数字的数组。所以，总结一下，现在，没有div，而这些不存在的divs必然会有6个数字。因此，我们的“输入”选择将是6个div的选择，数组中每个数字一个。
3. .enter()：这是“输入”选择。我们的数据中有6个数字，图表中有零个数字。因此，我们的输入选择有6个（新的）div。
4. .append("div")：这会创建div。使用append，我们可以创建实际的DOM元素。

这是一种直观理解输入选择的方法：



在第一个selectAll中，我们选择了当时不存在的DOM元素（它们只是占位符）。然后，我们将数据绑定到这些元素。一旦我们有6个数据编号和0个元素，我们的输入选择（对应于没有元素的数据）有6个新元素。