Javascript 气泡图中的d3.js中心图像

我试图将

居中

我的

图像

附加到

圆圈

中，但我不知道如何设置我的

x

和

y

，因为圆圈的大小是动态的，并且随着

svg

的宽度而变化

给定圆的当前半径，求

x

和

y

坐标的公式是什么

  vis
    .enter()
    .append("svg:image")
    .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
    .attr("xlink:href", function(d) {
      return d.img;
    })
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", d => d.r / 1.5);

（函数（）{
var json={
调用数据：[
[
“生活方式”，
1.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5bb3ce2f801fbc657f83dd57_pp-lifestyle（白色）.svg“
],
[
“体育”，
10,
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5c9131911ad86f445cb5abc7_pp-sport（白色）.svg“
],
[
“环境”，
8.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4bef42fff000159ba7a_pp-environ（白色）.svg“
],
[
“医疗”，
6.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4dc831e8500015fda53_pp-health（白色）.svg“
],
[
“食物”，
4.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f8c2cc78cc2d0001fd4a7e_pp-food（白色）.svg“
]
]
};
var svg=d3
.选择（“气泡图”）
.append（“svg”）
/*
.attr（“宽度”，直径）
.attr（“高度”，直径）；
*/
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“视图框”、“0 600 400”）
//类以使其响应
.classed（“svg内容响应”，true）；
var bubble=d3.0布局
.pack（）
.尺寸（[600400]）
.价值（功能（d）{
返回d.size；
})
.填充（2）；
//使用计算的布局值生成数据
var nodes=bubble.nodes（processData（json））.filter（函数（d）{
返回！d.儿童；
})；//过滤掉外部气泡
var vis=svg.selectAll（“圆圈”）.数据（节点、函数（d、i）{
返回d.name+i；
});
可见光
.输入（）
.附加（“圆圈”）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
.attr（“类”，函数（d）{
返回d.className；
})
.attr（“r”，0）
.transition（）
.持续时间（1000）
.attr（“r”，函数（d）{
返回d.r；
});
可见光
.输入（）
.append（“svg:image”）
.attr（“transform”，d=>“translate”（“+d.x+”，“+d.y+”））
.attr（“xlink:href”，函数（d）{
返回d.img；
})
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，d=>d.r/1.5）；
函数processData（数据）{
var obj=data.call_data；
var newDataSet=[]；
用于（obj中的var prop）{
newDataSet.push({
名称：obj[prop][0]，
类名：obj[prop][0].toLowerCase（），
尺寸：obj[prop][1]，
img:obj[prop][2]
});
}
返回{
子项：新数据集
};
}
})();
。生活方式{
填充物：第893层；
}
.体育{
填充：#2A83D4；
}
.环境{
填充：#6CC070；
}
.食物{
填充：#665C9E；
}
.医学{
填充：#C13E40；
}
.气泡图{
边框：2倍纯红；
显示：内联块；
位置：绝对位置；
宽度：100%；
垫底：100%；
/*纵横比*/
垂直对齐：顶部；
溢出：隐藏；
}
.svg内容响应{
边框：3倍纯绿；
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
由于您已经在使用
translate（“+d.x+”，“+d.y+”）
变换图像，从而使图像的起点作为相应圆的中心，因此您只需将图像偏移其各自的高度和宽度即可

i、 e.应用以下x、y属性：

.attr('x', d => -(d.r/1.5)/2)
.attr('y', d => -(d.r/1.5)/2)

将图像居中，其中
（d.r/1.5）
是图像的宽度/高度

代码片段：


（函数（）{
var json={
调用数据：[
[
“生活方式”，
1.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5bb3ce2f801fbc657f83dd57_pp-lifestyle（白色）.svg“
],
[
“体育”，
10,
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/5c9131911ad86f445cb5abc7_pp-sport（白色）.svg“
],
[
“环境”，
8.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4bef42fff000159ba7a_pp-environ（白色）.svg“
],
[
“医疗”，
6.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f2a4dc831e8500015fda53_pp-health（白色）.svg“
],
[
“食物”，
4.
"https://uploads-ssl.webflow.com/59df9e77ad9420000140eafe/59f8c2cc78cc2d0001fd4a7e_pp-food（白色）.svg“
]
]
};
var svg=d3
.选择（“气泡图”）
.append（“svg”）
/*
.attr（“宽度”，直径）
.attr（“高度”，直径）；
*/
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“视图框”、“0 600 400”）
//类以使其响应
.classed（“svg内容响应”，true）；
var bubble=d3.0布局
.pack（）
.尺寸（[600400]）
.价值（功能（d）{
返回d.size；
})
.填充（2）；
//使用计算的布局值生成数据
var nodes=bubble.nodes（processData（json））.filter（函数（d）{
返回！d.儿童；
})；//过滤掉外部气泡
var vis=svg.selectAll（“圆圈”）.数据（节点、函数（d、i）{
返回d.name+i；
});
可见光
.输入（）
.附加（“圆圈”）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
.attr（“类”，函数（d）{
返回d.className；
})
.attr（“r”，0）
.transition（）
.持续时间（1000）
.attr（“r”，函数（d）{
返回d.r；
});
可见光
.输入（）
.append（“svg:image”）.style（'opacity'，0）
.attr（“transform”，d=>“translate”（“+d.x+”，“+d.y+”））
.attr（'x'，d=>-（d.r/1.5）/2）
.attr（'y'，d=>-（d.r/1.5）/2）
.attr（“xlink:href”，函数（d）{
返回d.img；