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

Question

i'm trying to use the D3.js library together with the block of nbremer. My problem is that the image I provide in the index.html ( "Picture1.png" for example ) is not displayed on the axis of the radar chart. At the momement I'm using a dummy image as you can see in radarchart.js But I want to use the image that is provided in the data in the index.html The img property to be exact.

Can anyone give me an idea / push in the right direction? Thank you in advanced!

Here is a 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);

This is where I load the dummy image.

Here is an example image

Answer 1

To provide an image based on the data array we'll have to filter the data, once the axes are using a different data array (called allAxis , and also based on data ). Of course, a cleaner solution would be simply pushing the images together into allAxis , but let's see how to link them using data .

This is the snippet with the relevant modification:

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

Here, for every value in axis , we filter the data array (I'm using data[0] since your data array is repetitive) accordingly.

Notice that, once we are returning the value for img key, the key has to contain the entire path for that image (if it is in a different directory). Alternatively, you can do:

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

If the img key contains only the name of the file (and, again, if the file is in another directory/domain).

Here is your fiddle with different images for each axis: https://jsfiddle.net/gerardofurtado/33k6m7tj/