我目前正在尝试将API调用中的图像添加到D3.js中的强制定向图,但目前我的图形不显示任何节点。我能够将所有图像URL加载到名为image的变量中,但它不会显示它们。谁能看到我出错的地方?
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag)
.on('dblclick', reDirect)
.on('mouseover', connectedNodes)
.on('mouseout', allNodes)
.on('contextmenu', function(d){d3.event.preventDefault();tip.show(d);}) //.on('mousedown', tip.show)
.on('mouseleave', tip.hide) //.on('mouseup', tip.hide)
;
node.append("img")
.attr("r", function(d) { return d.degree;})
.attr("xlink:href",function(d) { return d.image;})
.attr("x", "60")
.attr("y", "60")
.attr("width", "20")
.attr("height", "20")
node.append("text")
.attr("dx", 3) //It means the offset of label and circle
.attr("dy", ".35em")
.text(function(d) { return d.name })
.style("font-size",function(d) { return d.degree*2+'px' })
.style("stroke", "gray");
force.on("tick", function() {
var radius = 10;
node.attr("transform", function(d) { return "translate(" + Math.max(radius, Math.min(width - radius, d.x)) + "," + Math.max(radius, Math.min(height - radius, d.y)) + ")"; });
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; });
});
以下是生成节点的功能:
function callNodes(node) {
$.get("http://api.stackexchange.com/2.2/tags/" + node + "/top-answerers/all_time?site=stackoverflow", function (data) {
allRelatedNodes = data["items"];
setNodes(allRelatedNodes, node);
});
}
function setNodes(allNodes, node) {
featureContent = { nodes:[{name: node,group:0,degree:20}],links:[]};
for (var i = 0; i < allNodes.length; i++) {
var colorRandom = Math.floor(Math.random() * 18) + 1;
var name = allNodes[i].user.display_name;
var image = allNodes[i].user.profile_image;
console.log(image);
var newNode = {'name': name, 'group': colorRandom, 'degree': 10, 'userImage': image};
var newLink = {'source': 0, 'target': i+1, 'color': 5};
featureContent.nodes.push(newNode);
featureContent.links.push(newLink);
}
d3.selectAll("svg").remove();
featureGraph(featureContent,900,700,0,"#graph",200,-200);
}