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, they will expand into more nodes. What I want to do is use place in image in the node which will be a plus symbol to all the user to know it's clickable. How do I do this? I was trying to use this symbol: http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg

D3

nodeUpdate.select("circle")
  .attr("r", 6.2)
  .style("fill", function(d) { return d._children ? "blue" : "#fff";

});

SVG:

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Am I on the right lines?

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"
           }]
          }]
        }
   
   

   1. 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.

more