D3.js節點上的頁面加載

Question

這裏是我到目前爲止

圖表沒有顯示他對負載節點做了JSFiddle ...我無法弄清楚什麼已經錯誤的代碼...

var zoom = null;    //the d3.js zoom object 
var zoomWidgetObj = null;   //the zoom widget draghandeler object 
var zoomWidgetObjDoZoom = true; 
var oldzoom = 0; 

var w = 1060, 
h = 800, 
radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]); 
var color = d3.scale.category20(); 

var vis = d3.select("body").append("svg:svg") 
.attr("width", w) 
.attr("height", h) 
.attr("idx", -1) 
.attr("idsel", -1); 

//d3.json(data, function(json) { 
var force = self.force = d3.layout.force() 
    .nodes(data.nodes) 
    .links(data.links) 
    .distance(100) 
    .linkDistance(1) 
    .linkStrength(0.1) 
    .charge(-1000) 
    .size([w,h]) 
    .start(); 

var link = vis.selectAll("line.link") 
    .data(data.links) 
    .enter().append("line") 
    .attr("class", "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; }) 
    .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 
.on("mouseover", function(d) { 
    var selection = d3.select(this); 
    var initialWidth = Number(selection.style("stroke-width")); 
    selection.transition().style("stroke-width", initialWidth + Number(1)) 
    .style("stroke-opacity", 1.0).duration(5) 
    .style("stroke","green") 
    }) 
    .on("mouseout", function(d) { 
    var selection = d3.select(this); 
    selection.transition().style("stroke-width", getLinkStroke(selection.data()[0])) 
    .style("stroke-opacity", conf.link_def_opacity) 
    .style("stroke", "black")}); 


var node = vis.selectAll("g.node") 
    .data(data.nodes) 
.enter().append("svg:g") 
.attr("class", "node") 
.attr("r", 4.5) 
.call(force.drag) 
.on("mousedown", function(d) { 
d.fixed = true; 
d3.select(this).classed("sticky", true)}) 
.on("mouseover", mouseover) 
.on("mouseout", mouseout); 

node.append("circle") 
    .attr("class", function(d){ return "node type"+d.type}) 
    .attr("r", function(d) { return radius(d.value) || 10 }) 
    .call(force.drag) 
.style("stroke", "gray") 
.attr('stroke', '#fff') 
    .attr('stroke-width', '2.5px'); 

node.append("svg:image") 
    .attr("class", "circle") 
    .attr("xlink:href", function(d){ return d.img_href}) 
    .attr("x", "-16px") 
    .attr("y", "-16px") 
    .attr("width", "32px") 
    .attr("height", "32px"); 

node.append("svg:title") 
    .text(function(d) { return d.name; }); 

node.append("svg:text") 
    .attr("class", "nodetext") 
    .attr("dx", 16) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name }); 

node.select("circle").style("fill", function(d) { return d.name=="Salvation Army"?"white":"blue"; }); 

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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
}); 
function mouseover() { 
    d3.select(this).select("circle").transition() 
    .duration(75) 
    .attr("r", 16) 
    .style("fill", "red"); 
} 

function mouseout() { 
    d3.select(this).select("circle").transition() 
    .duration(75) 
    .attr("r", 8); 

} 

Answer 1

一個圈子有NaN的半徑 - 這是最有可能的，爲什麼他們不渲染。在您設置半徑的位置放置一個斷點並隔離節點/ NaN的原因。