在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網絡圖中爲節點添加不同的圖像

回答

相關問題