如何在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;})