添加新的javascript结果在图中不被识别d3

Question

我已经添加了一个JavaScript的新peice旧脚本我不得不增加突出显示功能强制网络布局。我从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; 
    } 
} 

我又试图进一步追加代码作为建议here，只是增加了以下的剧本上面它被标记为大写字母底部

本来可以这么简单....脚本可以工作，但添加的功能（在节点之间添加高亮）没有。的错误消息表示：

Uncaught ReferenceError: graph is not defined 

我susipicion是，它涉及行

d3.json(endpoint, function(graph) { 

和事实，即后续}）;是在错误的地方，包括新的代码，但我已经打了它，我不知道如何纠正它

UPDATE

我已经解决了这一点。问题只是我在一个函数中声明了图，其他函数无法访问它。解决的办法是把其他功能放在延迟它的函数中，这实际上意味着移动最后的一个函数，

从线

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

到最后一行。做工精细现在

Answer 1

现在答案是