0

这是我到目前为止所做的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);

}
4

1 回答 1

0

One of your circles has a radius of NaN - this is most likely why they aren't rendering. Put a breakpoint where you're setting the radius and isolate the node / the cause of the NaN.

于 2013-08-01T09:07:14.457 回答