使用PNG使D3像力导向图一样 [英] Making D3 like Force-Directed Graph with PNGs

问题描述

我一直在尝试使D3像力导向图(例如: https://bl .ocks.org/mbostock/4062045 )和PNG(表示点应为图片).

I've been trying to make D3 like Force-Directed Graph (example: https://bl.ocks.org/mbostock/4062045) with PNGs (meaning the dots should be pictures).

这是一个视觉想法:

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

A different approach I tried is to map each graphic element into parallax.js (http://matthew.wagerfield.com/parallax/) and draw a line between the center of each graphic element, but I do not know how to do that, just yet.

推荐答案

由于您没有发布您的代码来创建力量，因此，我将提供一个一般性的答案.您可能必须根据自己的特定代码进行修改.

Since you didn't post your code to create the force, I'll provide a general answer. You may have to adapt it according to your specific code.

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

The basic idea here is appending group elements for each node, and appending both the circles and the images to those groups. Here I'm using 40x40 PNGs:

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在节点的数据数组中:

The url of each image is in the data array of the nodes:

 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>

这篇关于使用PNG使D3像力导向图一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！