Question

我正在尝试使用fantastic hierarchical edge bundling。

我从PHP脚本获取JSON数组的数据，然后由JavaScript修改。当我将输出JSON字符串保存为文件时，捆绑工作完美，但是，如果我尝试将JSON字符串直接插入到函数中，它似乎不起作用。因为我需要动态地改变JSON数组，所以如果我可以插入字符串会更好。我做错了什么？

这是代码

// some code generates phpstring, this is a string in the form of a json array.

<script src="http://d3js.org/d3.v3.min.js"></script>    

function edgebundling(phpstring) {

//document.write(phpstring);    <-- saving the output from this as the file "flares.json" and accessing with d3.json("flares.json") allows the script to work

//some initial code here

// d3.json("flares.json", function(json) {     <- using this line works but will not allow for dynamic alterations in the json

    json = JSON.parse( phpstring ); //  <-tried using this while outcommenting the line above and below and it does not work


  var nodes = cluster.nodes(packages.root(json)),
      links = packages.imports(nodes),
      splines = bundle(links);

  var path = svg.selectAll("path.link")
      .data(links)
    .enter().append("svg:path")
      .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
      .attr("d", function(d, i) { return line(splines[i]); });

  svg.selectAll("g.node")
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("svg:g")
      .attr("class", "node")
      .attr("id", function(d) { return "node-" + d.key; })
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
    .append("svg:text")
      .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
      .text(function(d) { return d.key; })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

  d3.select("input[type=range]").on("change", function() {
    line.tension(this.value / 100);
    path.attr("d", function(d, i) { return line(splines[i]); });
  });
// });   <-- this is outcommented with the JSON.parse approach

  //some more code  

//in the html body
<div style="width:1300;height:900;" id="bun">
<div style="position:relative;bottom:0;font-size:18px;">Tension: <input style="position:relative;top:3px;" type="range" min="0" max="100" value="85"></div></div>

编辑：一个注意事项是phpstring非常大，大约130kb。我已将问题缩小到代码的这一部分：

document.write ("check1<br>"); // <- this is executed
json = JSON.parse(phpstring);
document.write ("check2<br>"); // <- this is executed
var nodes = cluster.nodes(packages.root(json)),
links = packages.imports(nodes),
splines = bundle(links);
document.write ("check3<br>"); // <- this is NOT executed

软件包在脚本中进一步指向：

var packages = {

  // Lazily construct the package hierarchy from class names.
  root: function(classes) {
    var map = {};

    function find(name, data) {
      var node = map[name], i;
      if (!node) {
        node = map[name] = data || {name: name, children: []};
        if (name.length) {
          node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
          node.parent.children.push(node);
          node.key = name.substring(i + 1);
        }
      }
      //document.write(node[i]+'<br>');
      return node;
    }

    classes.forEach(function(d) {
    //document.write(d+'<br>');
    //document.write(d.name+'<br><br>');
      find(d.name, d);
    });

    return map[""];
  },

  // Return a list of imports for the given array of nodes.
  imports: function(nodes) {
    var map = {},
        imports = [];

    // Compute a map from name to node.
    nodes.forEach(function(d) {
      map[d.name] = d;
    });

    // For each import, construct a link from the source to target node.
    nodes.forEach(function(d) {
      if (d.imports) d.imports.forEach(function(i) {
        imports.push({source: map[d.name], target: map[i]});
      });
    });
    //alert(JSON.stringify(imports));
    //document.write(imports.toString());
    return imports;
  }
};

将JSON数组作为字符串传递而不是调用d3.json

0 个答案: