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

更新：New JSFIDDLE缩放现在工作，完全放弃了defs和rect，只是附加了图像。但仍然停留在翻译。d3：放大缩小圆形包装中的svg图像

翻译仍然无法进行缩放。我可以将translate设置为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。我在每个节点内的一个svg矩形内有一个d3圆形包装，里面有一个光栅图像。缩放时如何缩放图像？容器缩放，但图像保持较小，并在放大时重复。一直试图设置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

来源

2015-05-11 airwwwave

https://css-tricks.com/scale-svg/请问这是你要找的东西吗？ – Persijn

@Persijn谢谢。但那篇文章讨论缩放svg的。我所追求的就是像svg容器中的照片一样缩放栅格图像[如此处讨论]（http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg -circle形）。我会更新我的问题，使其更清楚。谢谢。 – airwwwave

看看[preserveAspectRatio]（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio）属性，但用小提琴帮助你会更容易。 – Kaiido

Answer JSFIDDLE

明白了。诀窍正在改变该位的可怕：

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

到可怕的这个更糟糕位：

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

那么同样y的。

不要误解我的意思，我很感谢zoom circle pack模板和将它放在一起的天才。谢谢。这只是针对我的noob级别的人，上面的代码看起来像某种惩罚。 :)

来源

2015-05-13 20:41:22 airwwwave

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

回答

相关问题