CODEWITHSUNDEEP
graphd3.jsdirected-graph
d-cubed
d-cubed

Reputation: 1112

using CSV property to set link length, node size d3

Following the example given by mbostock for creating a force graph with a csv:

How to convert to D3's JSON format?

http://bl.ocks.org/2949937

I'm creating a force graph with D3 but am unsure how / where to call upon a value from the CSV line to set node size, color, or link length.

I tried a few things e.g.:

links.forEach(function(link) {
    link.source = nodeByName(link.user1);
    link.target = nodeByName(link.user2);
    link.size = nodeByName(link.somevaluefromcsv)
    link.distance = nodeByName(link.somevaluefromcsv);
  });

This is just wrong. From what I can tell, it just generates empty nodes and the values aren't callable elsewhere.

var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d[3];}) //this is not returing any value as far as I can tell.
      .call(force.drag);

or further down in the tick function:

node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", function(d) {return d[7];});

There are probably a few things causing problems: 1. I don't seem to have a good conceptual model of the links function or the nodesbyName array or function.

Typical lines from the CSV (as it is now), in the order of: time, user1, user2, similarity score, total points, points against, points for, length are:

1223.8167,john6,john5,0.153846153846,1,0,1,5
1223.9166,john6,john5,0.185185185185,8,0,8,6
1223.9667,bobby4,bobby3,0.402777777778,224,320,-96,15
1224.1167,bobby4,bobby3,0.402777777778,226,310,-84,15
1224.2,bobby4,bobby3,0.402777777778,240,283,-43,15
1224.2,john6,john5,0.185185185185,2,0,2,5
1224.2,john6,john5,0.153846153846,2,0,2,5
1224.2667,bobby4,bobby3,0.397058823529,0,24,-24,13
1224.2833,john6,john5,0.153846153846,1,0,1,5
1224.45,bobby4,bobby3,0.397058823529,0,21,-21,13
1224.55,bobby4,bobby3,0.442857142857,0,18,-18,14

Upvotes: 2

Views: 1508

Answers (1)

Ivan Solntsev
Ivan Solntsev

Reputation: 2120

function nodeByName(name) - create new node or return existing node with name specified as argument. if you need to pass node properties from links, you can do it in forEach

links.forEach(function(link) {
    link.source = nodeByName(link.user1);
    link.target = nodeByName(link.user2);
    link.source.radius = link.radius
    link.size = link.somevaluefromcsv;
    link.distance = link.somevaluefromcsv;
});

links - array of links between nodes.

var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d.radius;}) // radius property of node
      .call(force.drag);

Upvotes: 3

Related Questions