Question

我正在尝试将D3.js库与nbremer块一起使用。我的问题是我在index.html中提供的图像（例如“Picture1.png”）没有显示在雷达图的轴上。我正在使用虚拟图像，你可以在radarchart.js中看到，但我想使用index.html中数据中提供的图像。确切地说，img属性。

任何人都可以给我一个想法/推动正确的方向吗？先谢谢你了！

这是一个jsfiddle：fiddle

//Append the icon
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 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("width", 60)
    .attr("height", 60);

这是我加载虚拟图像的地方。

Here is an example image

Answer 1

要提供基于data数组的图像，我们必须过滤数据，一旦轴使用不同的数据数组（称为allAxis，并且还基于data }）。当然，更简洁的解决方案是将图像一起推送到allAxis，但让我们看看如何使用data链接它们。

这是相关修改的片段：

 axis.append("svg:image")
     .attr("xlink:href", function(d){
          var image = data[0].filter(function(e) {
              return e.axis == d;
          });
          return image[0].img
     })

此处，对于axis中的每个值，我们会相应地过滤data数组（我正在使用data[0]，因为您的数据数组是重复的）。

请注意，一旦我们返回img键的值，该键必须包含该映像的整个路径（如果它位于不同的目录中）。或者，你可以这样做：

return "http://www.somewebsite.com/" + image[0].img

如果img密钥仅包含文件的名称（并且，如果文件位于另一个目录/域中，则再次）。

以下是每个轴的不同图像的小提琴：https://jsfiddle.net/gerardofurtado/33k6m7tj/

d3.js雷达图表，数据中提供的图像

1 个答案: