Como adicionar imagens aos gráficos gerados por c3.js - javascript, d3.js, svg, charts, c3.js

Eu estava tentando adicionar uma imagem a um gráfico - um gráfico de barras girado, por exemplo. O objetivo é definir visualmente uma meta para a série, como uma bandeira.

Eu poderia adicionar a imagem, como um elemento SVG, depois de criar o gráfico:

var chart = c3.generate("#foo", _chartOptions));

// put goal
var svg = d3.select($("#foo svg")[0]);
var imgs = svg.selectAll("image").data([0]);
imgs.enter()
.append("svg:image")
.attr("xlink:href", "img/flag1.png")
.attr("x", "60")
.attr("y", "0")
.attr("width", "20")
.attr("height", "20");

Mas não funciona para o que eu quero, porque o"flag" tem que estar ligado a um valor específico entre as séries. Como posso encontrar a posição de um determinado valor no eixo? Existe uma maneira de encontrar a matriz de transformação ou algo assim. Ou existe alguma função interna que eu possa usar?

Respostas:

Tente isso usando a classe pai de elementos.

 var stopUpper = d3.select(".upperStop");
stopUpper.append("image")
.attr("xlink:href", "ExtGWT/images/default/shared/stop_32.png")
.attr("x",10)
.attr("y", (US-10))
.attr("width", 20)
.attr("height", 20);