Add images to d3 chord diagram

Question

I would like images as the endpoints. I have tried adding but no luck. Any ideas/working examples?

http://bost.ocks.org/mike/uberdata/

Answer 1

Each neighborhood in that example is given a <g> element with a class of group .

// Add a group per neighborhood.
var group = svg.selectAll(".group")
    .data(layout.groups)
  .enter().append("g")
    .attr("class", "group")
    .on("mouseover", mouseover);

This is the element to which the text label and the endpoint path are appended.

// Add the group arc.
var groupPath = group.append("path")
    .attr("id", function(d, i) { return "group" + i; })
    .attr("d", arc)
    .style("fill", function(d, i) { return cities[i].color; });

// Add a text label.
var groupText = group.append("text")
    .attr("x", 6)
    .attr("dy", 15);

You could append each image to this group also, using an svg <image> element. If, for example, your dataset contains the urls for your images, you might do the following:

var groupImage = group.append("image")
  .attr("xlink:href", function(d) {return d.image_url;})