D3.js 使用外部数据强制布局图空白 space

Question

我想从我的 Node.JS 服务器为我的力布局图加载 JSON，我尝试了我在这个论坛上看到的代码，但它不起作用，我只有一个空白 space。我不知道为什么它不起作用。这是我的代码：

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 + ")";
                }
            });
            }

感谢您的帮助！

Answer 1

修复了您的语法错误，它正在运行：

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 = {};使用前需要定义

另外，你的json已经是正确的格式所以不需要links = json.links;，你可以直接使用links = json.links;

D3.js 使用外部数据强制布局图空白 space

D3.js Force Layout Graph blank space with external data

javascript

json

download

d3.js

force-layout