d3：我的路径似乎在翻倍，我不知道为什么

Question

I've been powering into D3, looking at samples by Mike Bostock and anyone else I can find, and brushing up on the documentation, and even have a book by Scott Murray on Interactive Data Visualization - a book on D3.

I'm currently working on a connection chart, and I'm starting to understand enough to take this all beyond just changing out the data from a sample, but I am running into some problems still that I can't figure out.

Here's my sample link, http://www.nogumallowed.com/test4.php

And here's my data, http://www.nogumallowed.com/userImages/friendData1.JSON

This sample has seven people and the rest are all likes from facebook. The chart shows the intersections of the likes between users. My problem is with the paths, it seems that I'm adding double the paths necessary, and I'm not sure why. I'm still getting familiar with the enter function, as well as the practice of selectiong something that isn't in the DOM to place it in the DOM.

Just doing some counting from the code, there should be 115 paths, but I keep generating 230 paths.

I'm still new enough to d3 that for the life of me, I can't figure this one out right now.

What I'd like to accomplish... When creating the gradients, the starting position should be blue when it's connected to a user, and then another various color for all of the likes. From the code I've put together, I don't believe there should ever be something that isn't a user start with blue, and a user should never have a line conencted to them that isn't blue at the base, but as you can see, i'm running into that.

---

Edit: I've found that my problem isn't with grabbing the incorrect paths, it's having connections with A and B, and not knowing this point comes first in the path. If I want the path at connection A to always be blue, and the connection at path B to always be green, I don't have a way to detect that beyond this path simple has a source of A and a target of B, I don't know which will really come first. I'm updating my example script to a lighter version to see this.

In this example, the 7 user names should always have blue coming from them, and everything else should always have red coming from them, but as you can see, that is definitely not always the case. This is where I am currently at a loss.

Answer 1

It looks like your data file actually contains 230 links:

var n = 0;
classes.forEach(function(d) { n = n + d.imports.length; });
// n == 230

Also you have items with the same name in the data (eg classes[8] abd classes[115]) - may be it leads to some confusiion