如何在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

由于您将数据映射到svg.selectAll('rect').data(data)元素中的所有Rect，因此d3选择正在“消耗”背景矩形。然后，当您使用.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;})