I am using CodeFlower built upon D3.js. I want to show an image as a background instead of arbitrary colors, and i successfully did that using SVG Patterns.

DEMO FIDDLE

  // Enter any new nodes
  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon-img");}) // just create a unique id (id es from the json)
            .attr('patternUnits', 'userSpaceOnUse')
            .attr('width', 80)
            .attr('height', 80)
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It es from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
                .attr("x", 0)
                .attr("y", 0)
                .attr("height", 80)
                .attr("width", 80)
                .attr("preserveAspectRatio", "xMinYMin slice");

  this.node.enter().append('svg:circle')
    .attr("class", "node CodeFlowerNode")
    .classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
    .attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
    .style("fill", function(d) { return ("url(#"+d.id+"-icon-img)");})
    /* .style("fill", function color(d) {
      return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
    })*/
    .call(this.force.drag)
    .on("click", this.click.bind(this))
    .on("mouseover", this.mouseover.bind(this))
    .on("mouseout", this.mouseout.bind(this));

The problem i am seeing is the image is not centrally aligned in the circle it is kind of tile layout posed of 4 images.

How can i make its position center and covering the circle nicely.

DEMO FIDDLE

I am using CodeFlower built upon D3.js. I want to show an image as a background instead of arbitrary colors, and i successfully did that using SVG Patterns.

DEMO FIDDLE

  // Enter any new nodes
  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon-img");}) // just create a unique id (id es from the json)
            .attr('patternUnits', 'userSpaceOnUse')
            .attr('width', 80)
            .attr('height', 80)
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It es from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
                .attr("x", 0)
                .attr("y", 0)
                .attr("height", 80)
                .attr("width", 80)
                .attr("preserveAspectRatio", "xMinYMin slice");

  this.node.enter().append('svg:circle')
    .attr("class", "node CodeFlowerNode")
    .classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
    .attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
    .style("fill", function(d) { return ("url(#"+d.id+"-icon-img)");})
    /* .style("fill", function color(d) {
      return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
    })*/
    .call(this.force.drag)
    .on("click", this.click.bind(this))
    .on("mouseover", this.mouseover.bind(this))
    .on("mouseout", this.mouseout.bind(this));

The problem i am seeing is the image is not centrally aligned in the circle it is kind of tile layout posed of 4 images.

How can i make its position center and covering the circle nicely.

DEMO FIDDLE

• javascript
• d3.js
• svg

1 Answer 1

You need to change the way you define your pattern. You should define it with respect to the element it is being applied to. So leave patternUnits at the default of objectBoundingBox, and set the width and height to 1.

Then you need to also set the patternContentUnits to objectBoundingBox also, and give the <image> the same size (width and height of 1).

  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon");})  
            .attr('width', 1)
            .attr('height', 1)
            .attr('patternContentUnits', 'objectBoundingBox')
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);})
                .attr("height", 1)
                .attr("width", 1)
                .attr("preserveAspectRatio", "xMinYMin slice");

Demo fiddle here