CODEWITHSUNDEEP
javascriptd3.jscharts
Tim Myers
Tim Myers

Reputation: 55

What causes one D3.js chart to conflict with another on same page?

I have two D3.js charts I am trying to display on a single html page. One is a funnel chart (sourced from here: https://github.com/smilli/d3-funnel-charts); the other is a Datamap of the USA with bubbles placed on it.

The funnel chart works fine until the datamap code is added; then only the funnel chart doesn;t fully render all its layers. The problem somehow gets worse when the page is reloaded.

I am new to D3, so I would be forever grateful if someone could explain how I can prevent the second chart from conflicting(?) with the rendering of the first.

Here is the example code:http://jsbin.com/dozer/1/edit

Upvotes: 1

Views: 1626

Answers (1)

Steve P
Steve P

Reputation: 19397

The root issue is that you're trying to use two different versions of D3 on the same page without doing anything to namespace them. If you look at your scripts, you'll see both these lines:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
...
<script src="http://d3js.org/d3.v3.min.js"></script>

If you can find or create a version of the funnel chart using D3 v3 that's probably the best long-term solution. However, see this answer for more on how you might attempt to get both versions running.

Upvotes: 1

Related Questions