nvd3.js - Nvd3.jsのラベルとして画像を使用する

Question

テキストラベルの代わりに画像を使用して、Nvd3でdiscreteBarChartを描画したいと思います。出来ますか ？もしそうなら、どのように？

Answer 1

不可能だと思いますが、たとえば次のように、d3 を使用して好きな場所に直接画像を配置できます。

d3.select("#chart1 svg").append("svg:image")
        .attr("xlink:href", "img/20.png")
        .attr("width", 70)
        .attr("height", 105)
        .attr("x", 160)
        .attr("y",100);

Answer 2

これは API の一部ではありませんが、ハッキングできます。

たとえば、x ラベルを画像に置き換えるには、次のようにします。

d3.selectAll('#yourChartId svg .nv-x.nv-axis.nvd3-svg g g g.tick')
  .select('text')
  .remove();

d3.selectAll('#yourChartId svg .nv-x.nv-axis.nvd3-svg g g g.tick')
  .append('svg:image')
  .attr('xlink:href', 'images/myimage.png')
  .attr('width', 40)
  .attr('height', 40);