D3.js 在D3散点图中，如何将可变大小的图像锚定到坐标/点的中心

我在创建散点图时意识到，图像被附加到坐标的0,0点。读了这篇文章后，我发现我可以通过“变换”将图像居中，并将x和y点调整为图像高度和宽度的一半

乙二醇

结果1：

这与预期的一样，但是，我需要图像大小来自数据集中名为“logosize”的字段

如果我尝试将logosize变量更新为获取logosize字段的函数，则转换不再以相同的方式工作：

乙二醇

结果2：

我相信我可能又错过了一些非常明显的东西，但任何帮助都将不胜感激

---

谢谢

现在您将

logosize

更改为一个函数，

.attr（'transform'，'translate（'+-logosize/2+'，'+-logosize/2+'））

不再有意义（将函数除以二？）。我建议不要将函数命名为与

logosize

number变量相同的名称，以避免混淆

下面是一个仅使用内联匿名函数的示例：

//image
    svg.selectAll(".image")
      .data(data)
      .enter()
      .append("svg:image")
      .attr("x", xMap)
      .attr("y", yMap)
      .attr("width", function(d) { return d.logosize; })
      .attr("height", function(d) { return d.logosize; })
      .attr('transform', function(d) { return 'translate('+ -d.logosize/2 +',' + -d.logosize/2 + ')'; }   )
      .attr("xlink:href", function(d) {
        return d.brand_image;
      })

var logosize = function(d) {
        return d.logosize
    };

//image
    svg.selectAll(".image")
      .data(data)
      .enter()
      .append("svg:image")
      .attr("x", xMap)
      .attr("y", yMap)
      .attr("width", logosize)
      .attr("height", logosize)
      .attr('transform', 'translate('+ -logosize/2 +',' + -logosize/2 + ')'   )
      .attr("xlink:href", function(d) {
        return d.brand_image;
      })

//image
    svg.selectAll(".image")
      .data(data)
      .enter()
      .append("svg:image")
      .attr("x", xMap)
      .attr("y", yMap)
      .attr("width", function(d) { return d.logosize; })
      .attr("height", function(d) { return d.logosize; })
      .attr('transform', function(d) { return 'translate('+ -d.logosize/2 +',' + -d.logosize/2 + ')'; }   )
      .attr("xlink:href", function(d) {
        return d.brand_image;
      })