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

Question

我可以轻松地在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.selectAll("rect")切换d3.select("#widget").append("svg").selectAll("rect")以便有第二个svg元素，但后来我明白了：

因此，任何一个元素都会丢失并且它们会正确叠加，或者它们不会叠加，所有元素都会被绘制。

我该怎么办？

Answer 1

正在消费背景矩形＆＃39;通过d3选择，因为您将数据映射到元素svg.selectAll('rect').data(data)中的所有rects。然后，当您使用.enter()方法时，它会选择您不具备匹配DOM元素的所有数据位。由于您的某个数据具有匹配的DOM元素，因此该元素不在.enter()提供的选择中。

要解决此问题，您需要做的就是将选择从rect更改为仅描述您的数据的内容，例如类。试试这个：

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