Javascript d3:缩放圆中的svg图像
我已尝试更改此stackoverflow主题提供的代码 而不是提供的图像,我试图添加一个圆形图像,适合于3级的圆圈 但是图像的直径似乎是环状的两倍。 为了举例说明,这里是小提琴 我知道解决方案位于zoomTo函数的底部,但我不知道如何更改它。你能帮忙吗Javascript d3:缩放圆中的svg图像,javascript,d3.js,svg,Javascript,D3.js,Svg,我已尝试更改此stackoverflow主题提供的代码 而不是提供的图像,我试图添加一个圆形图像,适合于3级的圆圈 但是图像的直径似乎是环状的两倍。 为了举例说明,这里是小提琴 我知道解决方案位于zoomTo函数的底部,但我不知道如何更改它。你能帮忙吗 function zoomTo(v) { var k = diameter / v[2]; view = v; node.attr("transform", function(d) { return "translate("
function zoomTo(v) {
var k = diameter / v[2];
view = v;
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;
});
image
.attr("transform", function(d) {
console.log(d.r);
return "translate(" + (((d.x - v[0]) * (k)) - ((d.r / 2) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r / 2) * k)) + ")";
})
.attr("width", function(d) {
return d.r * k;
})
.attr("height", function(d) {
return d.r * k;
})
}
您非常接近,发现问题出在zoomTo函数中 因此,首先改变,而不是这个:
.attr("width", function(d) { return d.r * k; })
.attr("height", function(d) { return d.r * k; })
应该是的
.attr("width", function(d) { return d.r * k*2; }) //width should be double of the radius
.attr("height", function(d) { return d.r * k*2 }) //height should be double of the radius.
在转变中
.attr("transform", function(d) {
return "translate(" + (((d.x - v[0]) * (k)) - ((d.r / 2) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r / 2) * k)) + ")";
})
它应该是(坦白地说,我不明白你们为什么要做d.r/2,圆半径的一半)
工作代码
.attr("transform", function(d) {
console.log(d.r);
return "translate(" + (((d.x - v[0]) * (k)) - ((d.r) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r) * k)) + ")";
})