将图像添加到d3.js图中的节点

时间:2016-03-21 20:00:15

标签: javascript node.js 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);
                }

0 个答案:

没有答案