Combining two d3 visualization [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I am combining two d3 visualizations on one page and need help with the CSS. At this point they appear on top of one another and I am so frustrated. The two visualizations are these: http://bl.ocks.org/mbostock/3883245:

and http://bl.ocks.org/mbostock/4063269:

I've just combined the two index.html files at this point. Any pointers to how I should style so that they don't overlap would be much appreciated!

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);

An SVG shouldn't be overlapping another SVG. The example above, shows 2 basic and separate SVGs in the same Body tag.

My guess is that you are somehow re-using the SVG canvas so that one renders on top of the other.