Question

我正在尝试使用d3.js circle packing example使用SVG的模式填充来填充一堆svg圈子。我的源图像是800x600，但圆圈的大小不一。我已将其设置如下：

  var patterns = defs.selectAll("pattern")
      .data(nodes.filter(function(d){ return !d.children }))
      .enter()
      .append('pattern')
      .attr('id',function(d){
        return 'id'+d.id
      })
      .attr('x','0')
      .attr('y','0')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .append('image')
      .attr('x','0')
      .attr('y','0')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .attr('xlink:href',function(d){
        return 'img/img' + d.image;
      })

  var circle = svg.selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .style("fill", function(d) {
        if (!d.children){
          return 'url(#id' + d.id + ')';
        } else {
          return d.children ? color(d.depth) : null;
        }

      })

这样我的DOM呈现如下：

<defs id="cdef">
    <pattern id="id65" x="0" y="0" height="326.8534904318234" width="435.8045449579344">
        <image x="0" y="0" height="326.8534904318234" width="435.8045449579344" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/img65.png"></image>
    </pattern>
    ...
</defs>

但是当我这样做时，圆圈中的图像会被超级吹灭（参见附图）。知道发生了什么吗？

Answer 1

我想出来了。

图案元素的高度和宽度似乎有点像刻度/百分比。宽度为＆＃34; 1＆＃34;意味着它将填充它所设置的整个元素。宽度为＆＃34; .25＆＃34;占该元素的25％。然后，在<pattern>范围内，您可以将图像的高度和宽度指定为它们填充的圆的高度和宽度的实际像素值，因此在这种情况下，我的代码更改为：

  var patterns = defs.selectAll("pattern")
      .data(nodes.filter(function(d){ return !d.children }))
      .enter()
      .append('pattern')
      .attr('id',function(d){
        return 'id'+d.id
      })
      .attr('x','0')
      .attr('y','0')
      .attr('height','1')
      .attr('width','1')
      .append('image')
      .attr('height',function(d){ return d.r*2})
      .attr('width',function(d){ return d.r*2*1.333333})
      .attr('xlink:href',function(d){
        return 'img/img' + d.image;
      })

然后，因为圆形包布局放大，我必须确保更改图像的defs，所以：

function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    defs.selectAll('image').attr('width',function(d){
      return d.r*2*1.333333*k
    }).attr('height',function(d){
      return d.r*2*k
    });
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });


  }

如果您正在修改上面提到的bl.ocks.org示例，则需要

。

使用url填充图案为svg圈时图像模糊

1 个答案: