Multiple node-link trees on the same page

[Seth F]

Hi everyone,

I'm facing a challenge that I bet others in the community will be able
to easily solve. I recently created two node-link trees based on the
"interactive node-link tree example". One tree sizes subcategories
of products by quantity sold, while the other sizes those same
subcategories by revenues. Here's a link to the first tree (which
contains a "pivot" link to the second): http://sethfamilian.com/d3/tree-interactive.html

I realized after building these trees that analysis of the categories
would be much easier if both trees were on the same page. But when I
tried to add a second node-link tree to the page, only one of the two
trees would load: http://sethfamilian.com/d3/tree-interactive3.html

After playing around with the code a bit, I realized that the tree
code included last is the one that loads, and the other code doesn't
load. Changing variable names for one of the node link trees did not
fix the problem.

Any idea what's going on here, and how I can get both trees to display
at the same time?

Thanks!
Seth

[Jason Davies]

Hi Seth,

On Wed, Oct 19, 2011 at 12:04:24PM -0700, Seth F wrote:
> I'm facing a challenge that I bet others in the community will be able
> to easily solve. I recently created two node-link trees based on the
> "interactive node-link tree example". One tree sizes subcategories
> of products by quantity sold, while the other sizes those same
> subcategories by revenues. Here's a link to the first tree (which
> contains a "pivot" link to the second): http://sethfamilian.com/d3/tree-interactive.html
>
> I realized after building these trees that analysis of the categories
> would be much easier if both trees were on the same page. But when I
> tried to add a second node-link tree to the page, only one of the two
> trees would load: http://sethfamilian.com/d3/tree-interactive3.html
>
> After playing around with the code a bit, I realized that the tree
> code included last is the one that loads, and the other code doesn't
> load. Changing variable names for one of the node link trees did not
> fix the problem.

It turns out you hadn't changed some of the variable names. For
example, you were still referencing "root" from the update() functions.
Also, you had two update() functions, and the second one was overwriting
the first (as they had the same names).

Rather than going through the pain of renaming variables to avoid
conflicts, it's much easier to wrap everything in a closure, like:

(function() {
// ... Code here
})();

You can have several of these. Variables declared inside will be scoped
within the closure and won't affect the global scope.

Here is a fixed version of your code:

http://bl.ocks.org/1299353

--
Jason Davies, http://www.jasondavies.com/

[Seth F]

Thanks Jason!

There's a slightly funky thing happening with the click-actions on the
nodes now, but I'm still grateful for your help and advice on wrapping
each function in closures.

Thanks again,
Seth

[Seth F]

Thanks again, Jason! I've updated the original code and it works
beautifully: http://sethfamilian.com/d3/tree-interactive3.html

I've also added some chart-specific CSS to better differentiate the
two charts.

Cheers,
Seth