html - 结合两个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 重叠。上面的示例在同一个 Body 标签中显示了 2 个基本且独立的 SVG。

我的猜测是您以某种方式重新使用了 SVG 画布，以便一个渲染在另一个之上。