d3：缩放圆包装中的 svg 图像

Question

更新：New JSFIDDLE 缩放现在有效，完全放弃了 defs 和 rect，只是附加了图像。但仍然停留在翻译上。

翻译仍然无法在缩放上工作。我可以将 x 和 y 的翻译设置为 -100，以获得正确的非缩放位置。但是，在缩放时，它当然仍在将其转换为 -100，而不是将其保持在适当位置所需的更大值。

底部的缩放部分的代码似乎需要一些东西。一直在搞乱当前注释掉的部分，但到目前为止运气不好。

        // .attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
        // .attr("x", function(d) { return d.r * k; })
        // .attr("y", function(d) { return d.r * k; })
        .attr("width", function(d) { return d.r * k; })
        .attr("height", function(d) { return d.r * k; })

这是JSFIDDLE。我有一个 d3 圆包装，每个节点内的 svg 矩形内有一个光栅图像。缩放时如何使图像缩放？容器缩放，但图像保持较小并在缩放时重复。一直在尝试正确设置 defs，但没有成功。

    var defs = svg.append("defs")
    // .data(nodes)
    // .enter()
    .append("pattern")
    .attr("id", "bg")
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', imageWidthHeight)
    .attr('height', imageWidthHeight)
    // .attr("transform", "translate(40,80)")
    .append("image")
    // .html("xlink:href", "img/" + function(d) { return d.image; })
    .attr("xlink:href", "http://www.public-domain-photos.com/free-stock-photos-4/travel/yosemite/yosemite-meadows.jpg")
    .attr('width', imageWidthHeight)
    .attr('height', imageWidthHeight)
    // .attr("transform", "translate(40,80)");

另外，无法让container/image平移到圆心。我暂时将这些部分注释掉了，因为它搞砸了一切。

已尝试应用这些讨论中的信息，但仍然卡住了。谢谢。

http://bl.ocks.org/mbostock/950642#graph.json

https://groups.google.com/forum/#!topic/d3-js/fL8_1BLrCyo

How to fill D3 SVG with image instead of colour with fill?

Adding elements to a D3 circle pack nodes

Answer 1

Answer JSFIDDLE

知道了。诀窍是改变这一点可怕的：

(d.x - v[0]) * k

更糟糕的是：

(((d.x - v[0]) * (k)) - ((d.r / 2) * k))

那么y也一样

不要误会我的意思，我很感谢缩放圆包模板和将它组合在一起的天才们。谢谢你。它仅适用于我这个菜鸟级别的人，上面的代码看起来像是某种惩罚。 :)

d3：缩放圆包装中的 svg 图像

d3: svg image in zoom circle packing

javascript

svg

image

d3.js

circle-pack