Anonymous Anonymous - 2 months ago 14
JSON Question

D3.js Force Layout Graph blank space with external data

I would like to load JSON for my force layout graph from my Node.JS server, I try code I seen on this forum but it doesn't works, I have just a blank space. I don't know why it doesn't works. This is my code :

function makeDraw(){
var links = [];
d3.json("./data.json", function(error, json) {
links = json.links;
}).on("load", function () {
links.forEach(function(link) {
link.source = nodes_1[link.source] || (nodes_1[link.source] = {name: link.source, level:link.level, life:link.life});
link.target = nodes_1[link.target] || (nodes_1[link.target] = {name: link.target, level:link.level, life:link.life});
});

var nodes_1 = {};


var width_1 = 960,
height_1 = 500;

var force_1 = d3.layout.force()
.nodes(d3.values(nodes_1))
.links(links)
.size([width_1, height_1])
.linkDistance(100)
.charge(-400)
.on("tick", tick)
.start();

var svg_1 = d3.select("body").append("svg")
.attr("width", width_1)
.attr("height", height_1);

// Per-type markers, as they don't inherit styles.
svg_1.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 20)
.attr("markerHeight", 20)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");

var path_1 = svg_1.append("g").selectAll("path")
.data(force_1.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.style("fill","none").style("stroke","black")
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });


var circle_1 = svg_1.append("g").selectAll("circle")
.data(force_1.nodes())
.enter().append("circle")
.attr("r", 20)
.call(force_1.drag)
.style("fill","red")
.on("click", click);


var text_1 = svg_1.append("g").selectAll("text")
.data(force_1.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path_1.attr("d", linkArc);
circle_1.attr("transform", transform);
text_1.attr("transform", transform)
}

function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
});
}


Thanks for your help !

Answer

Fixed your syntax errors and it is working:

function makeDraw() {
  var links = [];
  d3.json("./data.json", function(error, json) {
    links = json;

    var nodes_1 = {};

    links.forEach(function(link) {
      link.source = nodes_1[link.source] || (nodes_1[link.source] = {
        name: link.source,
        projectId: link.projectId,
        numberOfLink: link.numberOfLink
      });
      link.target = nodes_1[link.target] || (nodes_1[link.target] = {
        name: link.target,
        projectId: link.projectId,
        numberOfLink: link.numberOfLink
      });
    });



    var width_1 = 960,
      height_1 = 500;

    var force_1 = d3.layout.force()
      .nodes(d3.values(nodes_1))
      .links(links)
      .size([width_1, height_1])
      .linkDistance(100)
      .charge(-400)
      .on("tick", tick)
      .start();

    var svg_1 = d3.select("body").append("svg")
      .attr("width", width_1)
      .attr("height", height_1);

    // Per-type markers, as they don't inherit styles.
    svg_1.append("defs").selectAll("marker")
      .data(["suit", "licensing", "resolved"])
      .enter().append("marker")
      .attr("id", function(d) {
        return d;
      })
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -1.5)
      .attr("markerWidth", 20)
      .attr("markerHeight", 20)
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M0,-5L10,0L0,5");

    var path_1 = svg_1.append("g").selectAll("path")
      .data(force_1.links())
      .enter().append("path")
      .attr("class", function(d) {
        return "link " + d.type;
      })
      .style("fill", "none").style("stroke", "black")
      .attr("marker-end", function(d) {
        return "url(#" + d.type + ")";
      });


    var circle_1 = svg_1.append("g").selectAll("circle")
      .data(force_1.nodes())
      .enter().append("circle")
      .attr("r", 20)
      .call(force_1.drag)
      .style("fill", "red")
      .on("click", click);

    function click(d) {

    }

    var text_1 = svg_1.append("g").selectAll("text")
      .data(force_1.nodes())
      .enter().append("text")
      .attr("x", 8)
      .attr("y", ".31em")
      .text(function(d) {
        return d.name;
      });

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
      path_1.attr("d", linkArc);
      circle_1.attr("transform", transform);
      text_1.attr("transform", transform)
    }

    function linkArc(d) {
      var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
      return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    }

    function transform(d) {
      return "translate(" + d.x + "," + d.y + ")";
    }
  });
}

makeDraw();

var nodes_1 = {}; needs to be defined before being used.

Also, your json is already in the correct format so no need links = json.links;, you can directly use links = json.links;

Comments