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:

   var data = {
           "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)')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="700" height="660">
  <defs id="mdef">
    <pattern id="image" x="0" y="0" height="40" width="40">
      <image x="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)')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="700" height="660">
  <filter id="image" x="0%" y="0%" width="100%" height="100%">
    <feImage xlink: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.