如何在d3.js中绘制重叠图形？

我可以很容易地在svg中绘制单个元素，并让它们使用d3进行叠加，但不知何故，我无法将联合数据与绘制的图形结合起来

svg = d3.select("#widget").append("svg")
    .attr("width","360")
    .attr("height","240")
svg.append("rect")
    .attr("width","360")
    .attr("height","40")
    .attr("fill","#EDA939")
dataset = [40,50,60,90,30]
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("height",5)
    .attr("width",5)
    .attr("x",function(d){return d;})

不幸的是，我的数组缺少一个元素！svg中的占位符似乎已被我的背景svg使用

现在，我可以将svg.selectAllrect与d3.selectwidget.appendsvg.selectAllrect切换，这样就有了第二个svg元素，但我得到了以下结果：

因此，要么有一个元素丢失，它们正确覆盖，要么没有覆盖，所有元素都被绘制出来

---

我能做什么？

d3选择正在“使用”背景矩形，因为您使用svg将数据映射到元素中的所有矩形。selectAll'rect'。datadata。然后使用.enter方法时，它会选择所有数据位，这些数据位还没有匹配的DOM元素。由于您的一个数据具有匹配的DOM元素，因此该元素不在所提供的选择中

要解决这个问题，您只需将选择从rect更改为只描述数据的内容，例如类。请尝试以下方法：

svg.selectAll(".rectClass")
  .data(dataset)
  .enter()
  .append("rect")
  .classed('rectClass', true)
  .attr("height",5)
  .attr("width",5)
  .attr("x",function(d){return d;})

---

如此简单和优雅。非常感谢。