在d3 v4网络图中为节点添加不同的图像

我知道这里有几个主题讨论问题，但找不到结果对我有用。我试图修改经典的d3网络图Les悲惨的例子（d3v4版本HERE：https://bl.ocks.org/mbostock/4062045）为不同的节点添加不同的图像 - 文件的相对路径作为节点属性之一给出，例如。在d3 v4网络图中为节点添加不同的图像

{"id": "Valjean", "group": 1, img: "images/male.png"},

我试图做到的，是与此类似：https://bl.ocks.org/mbostock/950642但d3v4制成，并且不同的图像用于不同的节点。

所有的例子，我发现（也this promissing代码片段，不幸的是doesnt't对我的工作），我指向类似的方法，它看起来或多或少像这样的（无论是在D3 V4和V3）：

node.append("image") 
     .attr("xlink:href", function(d) { return d.img }) 
     .attr("x", -8) 
     .attr("y", -8) 
     .attr("width", 16) 
     .attr("height", 16);

但是，尽管花了几个小时，我无法使它工作。有任何想法吗？

来源

2017-08-29 Dominix

这里有一个简单的例子，其根据您v3例的形象结合您的v4例如：

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .links line { 
 
    stroke: #999; 
 
    stroke-opacity: 0.6; 
 
    } 
 
    
 
    .nodes circle { 
 
    stroke: #fff; 
 
    stroke-width: 1.5px; 
 
    } 
 
</style> 
 
<svg width="960" height="600"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 
    var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 

 
    var color = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
    var simulation = d3.forceSimulation() 
 
    .force("link", d3.forceLink().id(function(d) { 
 
     return d.id; 
 
    })) 
 
    .force("charge", d3.forceManyBody()) 
 
    .force("center", d3.forceCenter(width/2, height/2)); 
 

 
    d3.json("https://jsonblob.com/api/9f7e2c48-8ccd-11e7-8b46-ef38640909a4", function(error, graph) { 
 
    if (error) throw error; 
 

 
    var link = svg.append("g") 
 
     .attr("class", "links") 
 
     .selectAll("line") 
 
     .data(graph.links) 
 
     .enter().append("line") 
 
     .attr("stroke-width", function(d) { 
 
     return Math.sqrt(d.value); 
 
     }); 
 

 
    var node = svg.append("g") 
 
     .attr("class", "nodes") 
 
     .selectAll("image") 
 
     .data(graph.nodes) 
 
     .enter().append("image") 
 
     .attr("xlink:href", "https://github.com/favicon.ico") 
 
     .attr("x", -8) 
 
     .attr("y", -8) 
 
     .attr("width", 16) 
 
     .attr("height", 16) 
 
     .call(d3.drag() 
 
     .on("start", dragstarted) 
 
     .on("drag", dragged) 
 
     .on("end", dragended)); 
 

 

 
    node.append("title") 
 
     .text(function(d) { 
 
     return d.id; 
 
     }); 
 

 
    simulation 
 
     .nodes(graph.nodes) 
 
     .on("tick", ticked); 
 

 
    simulation.force("link") 
 
     .links(graph.links); 
 

 
    function ticked() { 
 
     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 dragstarted(d) { 
 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
 
    d.fx = d.x; 
 
    d.fy = d.y; 
 
    } 
 

 
    function dragged(d) { 
 
    d.fx = d3.event.x; 
 
    d.fy = d3.event.y; 
 
    } 
 

 
    function dragended(d) { 
 
    if (!d3.event.active) simulation.alphaTarget(0); 
 
    d.fx = null; 
 
    d.fy = null; 
 
    } 
 
</script> d.fx = d3.event.x; 
 
    d.fy = d3.event.y; 
 
    } 
 

 
    function dragended(d) { 
 
    if (!d3.event.active) simulation.alphaTarget(0); 
 
    d.fx = null; 
 
    d.fy = null; 
 
    } 
 
</script>

添加您的图像，然后应该是为改变和.attr("xlink:href"为简单：

.attr("xlink:href", function(d){ 
    return d.img; 
)};

来源

2017-08-29 15:27:25 Mark

工程就像一个魅力。谢谢！但是，如果其他人遇到类似的问题，并希望在圆圈内放置图像，你可以尝试下面提到的defs：https://stackoverflow.com/questions/25881186/d3-fill-shape-with-image-using-pattern，和然后检查一些函数中的某些节点属性，然后使用if条件。 – Dominix

在d3 v4网络图中为节点添加不同的图像

回答

相关问题