使用PNG制作类似于力导向图的D3

Question

我一直在尝试使用PNG(这意味着点应该是图片)制作像Force-Directed Graph(例如:https://bl.ocks.org/mbostock/4062045)的D3 .

这是一个视觉概念:

我尝试的另一种方法是将每个图形元素映射到parallax.js(http://matthew.wagerfield.com/parallax/)并在每个图形元素的中心之间画一条线,但我不知道该怎么做,还没.

Answer 1

既然你没有张贴你的代码来创建力,我将提供一个笼统的回答.您可能需要根据您的特定代码进行调整.

这里的基本思想是为每个节点附加组元素,并将圆圈和图像附加到这些组.这里我使用的是40x40 PNG:

var node = svg.selectAll("foo")
     .data(nodes)
     .enter()
     .append("g")
     .call(d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

 var nodeCircle = node.append("circle")
     .attr("r", 20)
     .attr("stroke", "gray")
     .attr("fill", "none");

 var nodeImage = node.append("image")
     .attr("xlink:href", d => d.image)
     .attr("height", "40")
     .attr("width", "40")
     .attr("x", -20)
     .attr("y", -20);

每个图像的url位于节点的数据数组中:

 var nodes = [{
     "id": "foo",
     "image": "https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png"
 }, {
     "id": "bar",
     "image": "https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png"
 }, {
     "id": "baz",
     "image": "https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png"
 }, {
     "id": "barbaz",
     "image": "https://icons.iconarchive.com/icons/ampeross/smooth/48/Opera-icon.png"
 }];

这是一个演示:

var width = 300;
 var height = 200;

 var svg = d3.select("body")
     .append("svg")
     .attr("width", width)
     .attr("height", height);

 var nodes = [{
     "id": "Chrome",
     "image": "https://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png"
 }, {
     "id": "Firefox",
     "image": "https://icons.iconarchive.com/icons/carlosjj/mozilla/48/Firefox-icon.png"
 }, {
     "id": "Safari",
     "image": "https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/48/safari-icon.png"
 }, {
     "id": "Opera",
     "image": "https://icons.iconarchive.com/icons/ampeross/smooth/48/Opera-icon.png"
 }];

 var edges = [{
     "source": 0,
     "target": 1
 }, {
     "source": 0,
     "target": 2
 }, {
     "source": 0,
     "target": 3
 }];

 var simulation = d3.forceSimulation()
     .force("link", d3.forceLink())
     .force("charge", d3.forceManyBody().strength(-1000))
     .force("center", d3.forceCenter(width / 2, height / 2));

 var links = svg.selectAll("foo")
     .data(edges)
     .enter()
     .append("line")
     .style("stroke", "#ccc")
     .style("stroke-width", 1);

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

 var node = svg.selectAll("foo")
     .data(nodes)
     .enter()
     .append("g")
     .call(d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

 var nodeCircle = node.append("circle")
     .attr("r", 20)
     .attr("stroke", "gray")
     .attr("stroke-width", "2px")
     .attr("fill", "white");

 var nodeImage = node.append("image")
     .attr("xlink:href", d => d.image)
     .attr("height", "40")
     .attr("width", "40")
     .attr("x", -20)
     .attr("y", -20)

 var texts = node.append("text")
     .style("fill", "black")
     .attr("dx", 20)
     .attr("dy", 8)
     .text(function(d) {
         return d.id;
     });

 simulation.nodes(nodes);
 simulation.force("link")
     .links(edges);

simulation.on("tick", function() { 
     links.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", (d) => "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 src="https://d3js.org/d3.v4.min.js"></script>