How To Place An Image In D3 Node?

So far I have created these D3 nodes that are used to create a collapsible hierarchical tree. So far these nodes are coloured #AA1C1C (dark red) to show that if you click on them,

Solution 1:

If I understand your question correctly, You tried to create a collapsible tree and you need to add image in nodes, so I modify this example and create some codes.

1. For the first step custom your json or data like this:

   vardata = {
           "fname": "Rachel",
            "lname": "Rogers",
            "title": "CEO",
             "photo": "http://lorempixel.com/60/60/cats/1",
            "children": [{
            "fname": "Bob",
              "lname": "Smith",
            "title": "President",
              "photo": "http://lorempixel.com/60/60/cats/2",
            "children": [{
                "fname": "Mary",
                  "lname": "Jane",
                   "title": "Vice President",
                  "photo": "http://lorempixel.com/60/60/cats/3",
            "children": [{
                 "fname": "Bill",
                  "lname": "August",
                   "title": "Dock Worker",
                  "photo": "http://lorempixel.com/60/60/cats/4"
            }, {
                "fname": "Reginald",
                 "lname": "Yoyo",
                 "title": "Line Assembly",
                "photo": "http://lorempixel.com/60/60/cats/5"
            }]
           }, {
              "fname": "Nathan",
               "lname": "Ringwald",
               "title": "Comptroller",
               "photo": "http://lorempixel.com/60/60/cats/6"
           }]
          }]
        }
   

   2. Modify your code.

---Update---

Regular way to show clickable Object in JavaScript is working with CSS class. As you can see in my jsfiddle code I used .node { cursor: pointer;} to show this node is clickable. you can change your code like this:

   nodeUpdate.select("circle")
               .attr("r", 6.2)
               .style("filter", function(d) { 
                   return d._children ? "url(#image)" : "#fff"; 
                }).on("mouseover",function(d){
                           d3.select(this).style("cursor","pointer");
                });

Complete jsfiddle here.

This link could help you.

---Update---

I modify my code to read data from json file. This is the updated code.

Solution 2:

You need to add a pattern if you are going to use a fill.

var box = d3.select('svg')
  .append('svg:circle')
  .attr('cx', 60)
  .attr('cy', 60)
  .attr('r', 10)
  .style('fill', 'url(#image)')

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><svgwidth="700"height="660"><defsid="mdef"><patternid="image"x="0"y="0"height="40"width="40"><imagex="0"y="0"width="20"height="20"xlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg"></image></pattern></defs></svg>

You could also do it with filters

d3.select('svg')
  .append('svg:circle')
  .attr('cx', 60)
  .attr('cy', 60)
  .attr('r', 20)
  .style('filter', 'url(#image)')

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><svgwidth="700"height="660"><filterid="image"x="0%"y="0%"width="100%"height="100%"><feImagexlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg" /></filter></svg>

Note that you just need the .style('fill', 'url(#image)') or .style('filter', 'url(#image)') and the markup within the svg from the above. The rest of the javascript is just for adding a sample circle.

Once you've added it to the svg, you can reuse both multiple times.