javascript - d3 コード ダイアグラムに画像を追加する

Question

エンドポイントとして画像が欲しいです。追加しようとしましたが、運がありません。アイデア/実例はありますか?

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

Answer 1

その例の各近傍には<g>、 のクラスを持つ要素が与えられgroupます。

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

これは、テキスト ラベルとエンドポイント パスが追加される要素です。

// 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);

<image>svg要素を使用して、各画像をこのグループに追加することもできます。たとえば、データセットに画像の URL が含まれている場合は、次のようにします。

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