How to append different shapes including images depending on data in D3.js?

Question

I tried to solve this by looking up several similar questions, but none could solve it. I want to create a force-directed graph using this form of data out of a JSON-File:

{
"nodes":[
    {"name":"A", "imagelink": "url-to-img" ,"shape-type":circle},
    {"name":"B", "imagelink": "url-to-img" , "shape-type":rectangle},
    {"name":"A", "imagelink": "url-to-img" ,"shape-type":triangle}
 ]
"links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":1,"value":1},
    {"source":2,"target":0,"value":1}
 ]
}

The graph's nodes should be a group consisting of a geometrical shape (defined by "shape-type") including an image (defined by "imagelink").

This is the basic force-layout code which I used:

var width = 960,
    height = 500;

var force = d3.layout.force()
        .charge(-1000)
        .linkDistance(150)
        .size([width, height]);

var svg = d3.select("body").append("svg");

d3.json("json-file.json");

force
     .nodes(graph.nodes)
     .links(graph.links)
     .start();

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

var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")                
            .attr("class", "node")
            .call(force.drag);

For including an image into a shape I used the "clip-path method" (example for circle):

node.append("circle")
            .attr("r", 20)
            .attr("cy", 0)
            .attr("cx", 0)
            .style("fill", "white")
            .style("stroke", "black")
            .style("stroke-width", "2"); 

 var clippath = node.append('clipPath').attr(function (d) {
            return ("clip-" + convert_shape(d.group))
        });

 clippath.append("circle")
            .attr("r", 19)
            .attr("cy", 0)
            .attr("cx", 0);

 node.append("image")
            .attr("x", -37.5)
            .attr("y", -37.5)
            .attr("height", 75)
            .attr("width", 75)
            .attr("xlink:href", function (d) {return (d.imagelink)})
            .attr("clip-path", function (d) {return ("url(#clip-" + d.shapetype) + ")")
            });

As you can see, my problem is to make the append()-function data-depended. So how can I realize this?

Thanks.

See http://stackoverflow.com/questions/21727202/append-dom-element-to-the-d3 or http://stackoverflow.com/questions/20114508/how-do-i-add-two-different-shapes-to-d3-forced-directed-graph-based-on-shape-fie — Lars Kotthoff, Mar 16 '15 at 14:38
@LarsKotthoff Thanks for your answer. I used the information of the second link and will post a working fiddle where I need to ask new questions, following the first question. — tertek, Mar 19 '15 at 15:58

tertek · Accepted Answer · 2021-02-23T14:57:07.727

1

Here is a working fiddle for drawing a force-directed graph with different shapes and images.

I used the pattern solution to include the image into shapes.

edited Feb 23 '21 at 14:57

answered Mar 19 '15 at 16:03

tertek

890
1
10
20

The fiddle is 404 now. Can you describe how you solved this problem, I have the same needs. – bikeman868 Feb 22 '21 at 21:16
As far as I can remember I used this approach: https://stackoverflow.com/a/20119553/3127170 – tertek Feb 23 '21 at 14:55

How to append different shapes including images depending on data in D3.js?

1 Answers1