添加新的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

現在答案是