从D3.js数据集中提取图像URL时，如何在PNG后面添加背景色？

我正在做一个散点图，并为图上的每个圆绘制一个图像填充。问题是这些图像是带有透明背景的PNG。这意味着我的重叠圆圈相互显示：

在这里看到-

我尝试过用CSS设置背景颜色，但它似乎被JS中的.stylefill完全覆盖了。我正在寻找30个左右的图片，所以我不想为了能够用CSS加载图片而保存它们

所以，我的问题是，有没有一种方法可以在我的PNG后面放置一个白色背景，同时从我的数据集中包含的URL中提取这些PNG

谢谢你的帮助

.轴线路径， .轴线{ 填充：无； 笔画：黑色； 形状渲染：边缘清晰； } .轴文本{ 字体系列：无衬线； 字体大小：11px； 背景色：白色； 字体大小：粗体； } .团队圈{ 背景色：白色； } //宽度和高度 var-margin={顶部：50，右侧：20，底部：30，左侧：40}； var w=960-margin.left-margin.right； var h=500-margin.top-margin.bottom； //创建比例函数 var xScale=d3.scale.linear .范围[0，w]； var yScale=d3.scale.linear .范围[h，0]； //var color=d3.scale.color； //定义轴 var xAxis=d3.svg.axis .scalexScale .定向底部； var yAxis=d3.svg.axis .鳞片鳞片 .orientleft； //创建SVG元素 var svg=d3.selectbody .appendsvg .attrwidth，w+边距。左+边距。右 .attr高度，h+页边距.top+页边距.bottom .附录 .attransform，translate+margin.left+，+margin.top+； //加载团队数据集 var teamdata=d3.tsvteam.tsv，functionerror，teamdata{ 如果错误抛出错误； teamdata.foreachd函数{ d、 entriesper60=+d.entriesper60； d、 结转百分比=+d.结转百分比； }; xScale.domaind3.extendteamdata，函数d{return d.carryinpercent；}.nice； yScale.domaind3.extendteamdata，函数d{return d.entriesper60；}.nice； //创建X轴 svg.appendg .attrclass，x轴 .attransform，translate0，+h+ callxAxis先生 .附录文本 .attr类，轴文本 艾特克斯，w .attry，-6 .styletext锚定，结束 .text进货百分比； //创建Y轴 svg.appendg .属性类，y轴 卡利亚克斯先生 .附录文本 .attr类，轴文本 .attry，-20 .attrz，0 .styletext定位符，中间 .textcentries/60 //图像的DEFS和Pattern svg.appenddefs .选择所有模式 .datateamdata 进来 .附录模式 .attr'id'，函数d，i{ 返回d.name； } //.attr'patternUnits'，'userSpaceOnUse' .attr'width'，20 .attr'height'，20 .appendimage .attrxlink:href，函数d{ 返回d.image+d.name； } .attr'width'，20 .attr'height'，20 .attransform，translate2，2； //创建团队圈 svg.selectAllcircle .datateamdata 进来 A.附加圆 .attrclass，teamcircle .stylestroke，函数d{return d.hex；} .笔画宽度，2 .stylestroke不透明度，.8 attrr先生，12岁 .attrcx，函数{return xScaled.carryinpercent；} .attracy，函数d{return yScaled.entriesper60；} .attrfill，函数d{return url+d.name+； }; };

---

我能想到的最好的方法是为每个圆创建一个组，然后首先创建一个白色背景的圆。大概是这样的：

var teamCircle = svg.selectAll("g.teamcircle")
  .data(teamdata)
  .enter()
  .append("g")
  .attr("class", "teamcircle")
  .transform(function(d){return "translate(" + xScale(d.carryinpercent) + "," +  yScale(d.entriesper60) + ")"});

teamCircle.append("circle")
.attr("fill", "white")
.attr("r", 12)

teamCircle.append("circle")
  .style("stroke", function(d) { return d.hex; })     
  .style("stroke-width", 2)
  .style("stroke-opacity", .8)
  .attr("r", 12)
 .attr("fill", function(d) { return "url(#" + d.name + ")"; 

---

用填充物把圆圈围成一个外圆。太棒了，谢谢你。我没有使用.transform translate，而是使用了我之前在那里使用的cy和cx值，并将其应用到teamCircle.append的每一轮中，它就工作了。