Javascript 向d3.js图形中的节点添加图像

我目前正试图将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);
                }

函数调用节点（node）{
$.get（”http://api.stackexchange.com/2.2/tags/“+node+”/top Answers/all_time？site=stackoverflow”，函数（数据）{
allRelatedNodes=数据[“项”]；
setNodes（allRelatedNodes，node）；
});
}
函数setNodes（所有节点，节点）{
featureContent={节点：[{名称：节点，组：0，度：20}]，链接：[]}；
对于（var i=0；i

您的节点属性命名似乎已关闭：

var newNode={…'image'：image}

或

.attr（“xlink:href”，函数（d）{return d.userImage；}）

Hmm如果为真，则仍不会更正图形。