D3.js CodeFlower Image as circle background

问题

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 comes 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 comes 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 composed of 4 images.

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

DEMO FIDDLE

回答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

来源：https://stackoverflow.com/questions/32221296/d3-js-codeflower-image-as-circle-background

标签

javascript

d3.js

svg