Question

我根据http://bl.ocks.org/nbremer/21746a9668ffdf6d8242制作了d3.js雷达图表，但我在向标签添加图片方面遇到了问题。问题是图像不居中。这是我的实际代码atm：

我使用的图像是虚拟图像，但我认为这会使问题变得明显。谁能指出我正确的方向？谢谢你的进步！

Answer 1

您必须将图像的一半大小/加到x和y坐标上。

axis.append("svg:image")
  .attr("class", "legend")
  .style("font-size", "11px")
  .attr("text-anchor", "middle")    //  
  .attr("xlink:href", "http://dummyimage.com/60x60/000/ffffff.png")
  .attr("x", function (d, i) { return -30+rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice * i - Math.PI / 2); })
  .attr("y", function (d, i) { return -30+rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice * i - Math.PI / 2); })
  .attr("width", 60)
  .attr("height", 60);

Answer 2

在Nadieh Bremer的代码中，这是她用于定位标签的内容：

.attr("x", function (d, i) { 
    return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice * i - Math.PI / 2); })
.attr("y", function (d, i) { 
    return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice * i - Math.PI / 2); })

当标签只是文本时，我们可以通过简单的方式轻松地将文本放在中心位置：

.attr("text-anchor", "middle")

但图片没有text-anchor。对于图片，x和y指的是左上角。您可以在屏幕截图中看到，所有小方块的左上角都在中间位置：

我们需要的是向上和向左移动所有图像，直到图像的中心位于左上角的位置。由于所有图像都有一个名为legend的类（并且所有图像都是60x60像素），您只需要：

d3.selectAll(".legend").attr("transform", "translate(-30,-30)");

或者，您可以使用正确的值设置x和y，如ego2dot0 answer中所示。

d3.js雷达图表，图像为标签

2 个答案: