embedding an image via d3 does not work

Question

I am using an example from here

And I am trying to put an image into the white child node circles. So I made svg def, and pattern dom like the one below

var svg = d3.select("div.global-main-wrap").append("svg")
  .attr("width", window.innerWidth * 2)
  .attr("height", window.innerHeight * 2)
  .append("g")
  .attr("transform", "translate(" + diameter / 1.2 + "," + diameter / 2 + ")");

var pattern = d3.select("svg")
  .append('svg:defs')
  .append('pattern')
    .attr('id', 'album')
    .attr("patternUnits", "userSpaceOnUse")
    .attr('width', '6')
    .attr('height', '6')
  .append('image')
    .attr("xlink:href", "/images/artist.jpg")
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', 6)
    .attr('height', 6);

The image successfully imports, but does not attach to the circle.

When i used it in here:

svg.selectAll(".node--leaf")
  .data(nodes)
  .style("fill", function(d){
    console.log("fuck this")
    return("url(#album)");
  })

The html(under svg) generated by d3 looks like this

Cyril Cherian · Accepted Answer

You need to first define patterns in your def in svg like:

In this different image for different radius else the image will not come proper and it will be cut off...if you are a css expert you will definitely find a better way :)

Then a function to return image based on radius size:

var getImage = function (d) {
    if (d.r > 0 && d.r <= 5) {
        return "url(#image0)"
    }
    if (d.r > 5 && d.r <= 10) {
        return "url(#image1)"
    }
    if (d.r > 10 && d.r <= 15) {
        return "url(#image2)"
    }
    if (d.r > 15 && d.r <= 20) {
        return "url(#image4)"
    }
    if (d.r > 20 && d.r <= 25) {
        return "url(#image3)"
    }
    if (d.r > 25 && d.r <= 30) {
        return "url(#image6)"
    }
    if (d.r > 30 && d.r <= 35) {
        return "url(#image5)"
    }
    if (d.r > 35) {
        return "#FFF";
    }
}

The above function is called when we define the style for circle like this:

var circleFill = function (d) {
    if (d['color']) {
        return d.color;
    } else {
        return d.children ? color(d.depth) : getImage(d);
    }
}

Note on zoom I am removing the images like this:

//this will make the circles not have images on zoom
var circleFillZoom = function (d) {
    if (d['color']) {
        return d.color;
    } else {
        return d.children ? color(d.depth) : '#FFF';
    }
}

Working code here.

embedding an image via d3 does not work

Answers (2)

Related Questions