Question

我遇到了与here描述的问题类似的问题，但那里提供的解决方案对我来说似乎不起作用。我正在尝试使用我自己的json数据创建一个基于力的标签放置的力导向图。我在读取数据时遇到了一个未指定的未捕获的javascript错误。我的数据采用以下格式：

{"nodes": [{"name": Bob, "id": 1}, {"name": Suzy, "id": 2}],
 "links": [{"source": 1, "target":2}]}

我的脚本如下。任何见解都会非常有用！

<script type="text/javascript" charset="utf-8">
      var w = 960, h = 500;

      var labelDistance = 0;

      var vis = d3.select("body").append("svg:svg").attr("width", w).attr("height", h);

      var nodes = [];
      var labelAnchors = [];
      var labelAnchorLinks = [];
      var links = [];

    d3.json("data.json", function(error, graph) {
        if (error) throw error;

 
   for (var i = 0; i < graph.nodes.length; i++) {
    var node = graph.nodes[i];
     nodes.push(node);
     labelAnchors.push({
       node : node
     });
     labelAnchors.push({
       node : node
     });
   }
    
    graph.links.forEach(function(link, i) {

      links.push({
        source: link.source,
        target: link.target,
        weight: Math.random()
      });
      labelAnchorLinks.push({
        source: link.source * 2,
        target: link.target * 2 + 1,
        weight: 1
      });
    });

      var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) {
        return x.weight * 10
      });


      force.start();

      var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]);
      force2.start();

      var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC");

      var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
      node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3);
      node.call(force.drag);


      var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");

      var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
      anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
        anchorNode.append("svg:text").text(function(d, i) {
        return i % 2 == 0 ? "" : d.node.label
      }).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);

      var updateLink = function() {
        this.attr("x1", function(d) {
          return d.source.x;
        }).attr("y1", function(d) {
          return d.source.y;
        }).attr("x2", function(d) {
          return d.target.x;
        }).attr("y2", function(d) {
          return d.target.y;
        });

      }

      var updateNode = function() {
        this.attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });

      }


      force.on("tick", function() {

        force2.start();

        node.call(updateNode);

        anchorNode.each(function(d, i) {
          if(i % 2 == 0) {
            d.x = d.node.x;
            d.y = d.node.y;
          } else {
            var b = this.childNodes[1].getBBox();

            var diffX = d.x - d.node.x;
            var diffY = d.y - d.node.y;

            var dist = Math.sqrt(diffX * diffX + diffY * diffY);

            var shiftX = b.width * (diffX - dist) / (dist * 2);
            shiftX = Math.max(-b.width, Math.min(0, shiftX));
            var shiftY = 5;
            this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
          }
        });


        anchorNode.call(updateNode);

        link.call(updateLink);
        anchorLink.call(updateLink);

  });
        });

    </script>

Answer 1

如果没有指定文件系统或外部资源的正确路径，则无法读取文件。

这意味着您必须交换此行：

d3.json("/data/", function(error, graph) {

有类似的东西：

d3.json("./data.json", function(error, graph) {

或者：

d3.json("http://www.somesite.com/data.json", function(error, graph) {

此外，请确保您在计算机上运行本地服务器，否则该呼叫将失败。

在json数据中读取未捕获的错误到d3强制导向图

1 个答案: