D3.js CodeFlower图像作为圆圈背景

问题描述

我正在使用基于D3.js构建的CodeFlower.我想将图像显示为背景而不是任意颜色，并且我成功地使用SVG模式进行了显示.

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.

演示场

  // 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));

我看到的问题是图像不在圆中居中对齐，这是一种由4张图像组成的图块布局.

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.

演示场

推荐答案

您需要更改定义模式的方式.您应该根据要应用的元素来定义它.因此，将patternUnits保留为默认的objectBoundingBox，并将width和height设置为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.

然后，您还需要将patternContentUnits设置为objectBoundingBox，并赋予<image>相同的大小(宽度和高度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");

此处演示小提琴

这篇关于D3.js CodeFlower图像作为圆圈背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！