d3：缩放圆形包装中的svg图像 [英] d3: svg image in zoom circle packing
问题描述
更新：新的JSFIDDLE 缩放现在正在工作，完全抛弃defs和rect并且只是附加了图片。但仍然坚持翻译。
UPDATE: New JSFIDDLE Scaling now working, ditched the defs and rect altogether and just appended the image. But still stuck on translate.
翻译仍无法进行缩放。我可以将转换设置为-100表示x和y，以使非缩放位置正确。但是，当缩放时，它当然仍然将其翻译为-100而不是将其保持在适当位置所需的更大值。
The translating is still not working on zoom. I can set the translate to say -100 for both x and y to get the non-zoomed placement correct. But, when zooming, it's of course still translating it -100 and not the larger value it would need to be to keep it in place.
似乎需要在缩放部分中的代码朝向底部。一直在搞乱当前注释掉的部分，但到目前为止还没有运气。
Appears to need something in the code in the zoom section toward the bottom. Been messing with the part currently commented out, but no luck so far.
// .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，但没有运气。
Here's JSFIDDLE. I have a d3 circle packing with a raster image inside an svg rect within each node. How do you make the image scale when zooming? The container scales, but the image stays small and repeats when zoomed. Been trying to set the defs correctly, but no luck.
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)");
此外，无法将容器/图像转换为圆的中心。我暂时评论了这些内容，因为它搞砸了所有内容。
Also, can't get the container/image to translate into the center of the circle. I've commented those bits out for now because it screws everything up.
尝试从这些讨论中应用信息，但仍然卡住了。谢谢。
Have tried to apply info from these discussions, but still stuck. Thanks.
http：/ /bl.ocks.org/mbostock/950642#graph.json
https://groups.google.com/forum/#!topic/d3-js/fL8_1BLrCyo
推荐答案
知道了。诀窍是改变这一点可怕：
Got it. The trick was changing this bit of horrible:
(d.x - v[0]) * k
这更可怕的一点：
(((d.x - v[0]) * (k)) - ((d.r / 2) * k))
然后y相同。
不要误会我的意思，我很感激缩放圈包模板和天才（es）谁把它放在一起。谢谢。这只是我的noob级别的人，上面的代码看起来像某种惩罚。 ：）
Don't get me wrong, I'm grateful for the zoom circle pack template and the genius(es) who put it together. Thank you. It's just for someone at my noob level, the code above looks like a punishment of some kind. :)
这篇关于d3：缩放圆形包装中的svg图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
