添加新的javascript导致图形在d3中不被识别

Question

我在旧脚本中添加了一个新的javascript片段，我必须为强制网络布局添加高亮显示功能。我从rails应用程序中生成的json中获取图表信息。我一直使用的原始代码在这里:

   var width = 960,
    height = 960;
var color = d3.scale.category20();
var force = d3.layout.force()
    .charge(-100)
    .linkDistance(530)
    .size([width, height]);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var endpoint = window.location.href+".json"
d3.json(endpoint, function(graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();
  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("marker-end",  "url(#suit)");
  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 10)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag)
      .on('dblclick', connectedNodes);
  node.append("title")
      .text(function(d) { return d.name; });
  force.on("tick", function() {
    link.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; });
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});
svg.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", 25)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
    .style("stroke", "#4679BD")
    .style("opacity", "0.6");
    
    //APPENDED CODE ADDED HERE

  //Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
    linkedByIndex[i + "," + i] = 1;
};
graph.links.forEach(function (d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
    if (toggle == 0) {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        node.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });
        link.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });
        //Reduce the op
        toggle = 1;
    } else {
        //Put them back to opacity=1
        node.style("opacity", 1);
        link.style("opacity", 1);
        toggle = 0;
    }
}

然后我尝试按照这里的建议追加更多的代码，并简单地将以下代码添加到上面脚本的底部，并以大写字母

标记

可以这么简单....该脚本可以工作，但添加的功能(在节点之间添加高亮)却不能。错误信息显示:

 Uncaught ReferenceError: graph is not defined

我怀疑它与

一行有关。

  d3.json(endpoint, function(graph) {

和后续});是在错误的地方包含新的代码，但我玩过它，我不确定如何纠正它

<标题> 更新

我解决了这个问题。问题很简单，我在函数中声明了graph，而其他函数无法访问它。解决方案是将其他函数放入声明它的函数中，这实际上意味着移动最后一个

});

从

行

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

到最后一行。

Answer 1

答案现在在问题的UPDATE部分给出了