结合两个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画布，使其中一个呈现在另一个之上。