Thursday, February 2, 2017

Using the force directed graph with custom data (pt2)

The code in
https://github.com/bshambaugh/node-arc-d3/blob/master/js/tests/index.html was used.

The lines 41 - 51 and 103 - 105 were added:

var linklabel = svg.append("g")
.attr("class","links")
.selectAll("text")
.data(graph.links)
.enter().append("text");

var linklabels = linklabel
.text( function(d) { return d.label; })
.attr("font-family","sans-serif")
.attr("font-size","10px")
.attr("fill","black");

linklabels
.attr("x", function(d) { return (d.source.x + d.target.x)/2; })
.attr("y", function(d) { return (d.source.y + d.target.y)/2; });

The data source was changed:
(see: https://github.com/bshambaugh/node-arc-d3/blob/master/js/tests/createprimatives-out4.json)

{
  "nodes": [
    {"id": "a", "group": 1},
    {"id": "c", "group": 1},
    {"id": "d", "group": 1},
    {"id": "e", "group": 1},
    {"id": "q", "group": 1}
  ],
"links": [
    {"source": "d", "target": "q", "value": 1, "label": "i"},
    {"source": "a", "target": "c", "value": 8, "label": "f"},
    {"source": "c", "target": "d", "value": 10, "label": "g"},
    {"source": "e", "target": "c", "value": 10, "label": "h"},
    {"source": "c", "target": "q", "value": 10, "label": "i"}
  ]
}

No comments:

Post a Comment