結合兩個d3可視化

Question

我在一個頁面上組合了兩個d3可視化，需要CSS的幫助。在這一點上，它們互相重疊，我感到非常沮喪。這兩個可視化是這些：http://bl.ocks.org/mbostock/3883245：

和http://bl.ocks.org/mbostock/4063269：

我在這一點上只是兩者相結合的index.html文件。任何指向我應該如何樣式，以便它們不重疊的指針將非常感謝！

Answer 1

http://jsfiddle.net/dcryan22/GUH4A/

d3.select('body') 
.append('svg') 
.attr('height', 100) 
.attr('width', 100) 
.append('rect') 
.attr('fill', 'red') 
.attr('height', 100) 
.attr('width', 100); 

d3.select('body') 
.append('svg') 
.attr('height', 100) 
.attr('width', 100) 
.append('rect') 
.attr('fill', 'blue') 
.attr('height', 100) 
.attr('width', 100); 

的SVG不應重疊另一個SVG。上面的例子顯示了2個基本和獨立的SVG在同一個Body標籤中。

我的猜測是，你以某種方式重新使用SVG畫布，使其中一個呈現在另一個之上。