D3.js Two Graphs On Same Page Is On Top Of Each Other

I have 2 graphs each in separate angular directive

Solution 1:

I notice that both of your chart tags are using the same id id="plot1".

I'm not much of an expert on these things, but I'm fairly sure that id's should be unique.

From w3school: "The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document)."

Solution 2:

You might also need to use two different variables var svg1 and var svg2 in your scripts, because you know, the async functions will have trouble to find the correct svg element.

---

Story:

Google search took me here for having trouble to place two SVGs on a single DOM. Just check if this is your case.

The problem I faced:

• I had two chart elements on the same page; the ids, names were different.
• Both of them were at different portion of page, (generated using a template engine[GSP])
• Both the blocks had a similar script. The content was loaded from JSON API.
• The chart contents were overlapped

The actual problem:

• The variable names were messed up. Both the scripts used same variable var svg=... to refer to SVG element. The JSON response in async function from server was going to second SVG because its script reassigned var svg=...

The solution:

I used two different variables: var svg1=... and var svg2=...

Share