CODEWITHSUNDEEP
javascriptcolorsstylesscaled3.js
user1514509
user1514509

Reputation: 11

force directed graph - define the color of a node, if the node is source and target at the same time

I created a force directed graph like this which works with a JSON file structured like the miserables.js. The visualization shows a network between publications referencing on each other.

The following code defines the colors for a source-node and a target-node:

var color = d3.scale.category10();...

.style("fill", function(d) { return color(d.group); })

So, how can I define the color for a node, which is the source and target at the same time?

Upvotes: 0

Views: 1309

Answers (1)

user909746
user909746

Reputation:

The color is set based on the node's group, and the node group is loaded from the JSON data source. So, I think you would need to pre-process the data to add additional group.

For instance, let's say there are three node types: source=1, target=2, both=3. The D3 JSON data source specifies both the nodes and the links between nodes.

For example: 

{
    "nodes":[
        {"name":"source","type":"source","group":1},
        {"name":"target","type":"target","group":2},
        {"name":"source & target","type":"both","group":3}
    ],
    "links":[
        {"source":0,"target":1,"value":1},
        {"source":0,"target":2,"value":2},
        {"source":2,"target":1,"value":3}
    ]
}

An running example of this, is here. If you hover over the nodes, you'll see the tool tip that shows each node's type.

Upvotes: 2

Related Questions