I'm trying to reproduce the "tree diagram with images as nodes" .

However, instead of having all nodes with images, I'd like to have some nodes with images and others with the regular circles.

Any ideas?

Is it something I need to change in this part of the code:

nodeEnter.append("image")
  .attr("xlink:href", function(d) { return d.icon; })
  .attr("x", "-12px")
  .attr("y", "-12px")
  .attr("width", "24px")
  .attr("height", "24px");    

I'm trying to reproduce the "tree diagram with images as nodes" .

However, instead of having all nodes with images, I'd like to have some nodes with images and others with the regular circles.

Any ideas?

Is it something I need to change in this part of the code:

nodeEnter.append("image")
  .attr("xlink:href", function(d) { return d.icon; })
  .attr("x", "-12px")
  .attr("y", "-12px")
  .attr("width", "24px")
  .attr("height", "24px");    

• javascript
• image
• svg
• d3.js
• tree

• One way of doing it would be to treat the nodes you want circles and images for separately. That is, you filter your selection to have only the elements you want circles for and append circles for those. Similar for the nodes with images. – Lars Kotthoff Commented May 5, 2014 at 20:22
• Another way is to make the nodes <g> elements, and then either add an image or a circle to the group according to the data. – AmeliaBR Commented May 5, 2014 at 20:59

1 Answer 1

There are definitely several significantly different ways to achieve what you want. However, I am going to show you just one way which is both simple and in the spirit of d3 library.

For convenience, I prepared jsfiddle version of the example you mentioned:

link to jsfiddle

(since I couldn't figure out paths to icons from example, I used some that I found on the internet, and I used full internet addresses for them)

Now, let's change two of such internet icon paths to empty string (indicating that circles should be displayed instead of icons), like in this code:

  {
    "name": "Son of A",
    "parent": "Level 2: A",
    "value": 5,
    "type": "steelblue",
    "icon": "",
    "level": "orange"
  },

We have to find the way to select only nodes that contain empty string for icons, and to add circles for them. This is done with following code:

  nodeEnter.filter(function(d) {
            return (d.icon == "");
       })
      .append("circle")
      .attr("cx", "0px")
      .attr("cy", "0px")
      .attr("r", "12px");

That's it!

link to jsfiddle