CODEWITHSUNDEEP
javascriptd3.jssvgcircle-pack
Jakub Svec
Jakub Svec

Reputation: 852

d3.js Links between nodes not rendering as lines

I am using a modified balloon graph and having issues with getting the links between the nodes to render. I am using JustinVDM's custom balloon graph (https://gist.github.com/justinvdm/3676778)

The data being used is the stock Bostock flare.json data: http://bl.ocks.org/mbostock/4063530.

If I include the "error" option in d3.json("flare.json", function(error, root) {..., it will error. Without it, at least the nodes appear. Is the data for the source and target even being identified?

If it is, the attempt below is trying to call the coordinates of the parent source and target child and draw a line between them, but I don't know if this approach is proper. Should I instead be using d3.svg.diagonal?

This is the graph as it appears: No edges

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;


var balloon = d3.layout.balloon()
  .size([width, height])
  .gap(50)                                      

var line = d3.svg.line()

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")")

    root = "flare.json";
    root.y0 = height / 2;
    root.x0 = width / 2;

d3.json("flare.json", function(root) {
  var nodes = balloon.nodes(root),
      links = balloon.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", line)
      .attr("fill", "black");

  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  node.append("text")
      .attr("dx", function(d) { return d.x })
      .attr("dy", function(d) { return d.y })
      .attr("font-size", "5px")
      .attr("fill", "white")
      .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
      .text(function(d) { return d.name; })
});

UPDATE: I have added the following code from the API reference about "hierarchy.links":

var link= svg.selectAll("path")
  .data(links)
 .enter()
  .append("path")
  .attr("d", d3.svg.diagonal());

The resulta are a little strange, but if I replace d3.svg.diagonal() with d3.svg.line(), the code breaks.

enter image description here

How do I just make the edges lines and not ribbons?

Upvotes: 1

Views: 2604

Answers (2)

mes5k
mes5k

Reputation: 875

You make the edges lines by setting the fill to none and using stroke to define the color. Something like this:

var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "black");

Upvotes: 2

Christopher Chiche
Christopher Chiche

Reputation: 15335

There are no links between nodes in this layout. The goal is to represent a tree as a graph with nested nodes.

However, if you really want to add links even if they add information only by their color or thickness, then you can always draw lines between circles by giving each circle a different id and then draw the line between the source and the target circles you would from your data.

Upvotes: 1

Related Questions