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 rect内有一个光栅图像。如何在缩放时使图像缩放？容器缩放，但图像保持较小并在缩放时重复。一直试图正确设置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)");

此外，无法将容器/图像转换为圆圈的中心。我现在已经对这些内容进行了评论，因为它搞砸了所有内容。

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

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相同。

不要误会我的意思，我很感激缩放圈包模板和把它组合在一起的天才。谢谢。它仅适用于我的noob级别的人，上面的代码看起来像某种惩罚。：）

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

1 个答案: