如何将图像添加到 c3.js 生成的图表

Question

我试图将图像添加到图表 - 例如旋转条形图。目的是在视觉上为系列设定一个目标，就像一面旗帜。

我可以在创建图表后将图像添加为 SVG 元素：

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

但它不适用于我想要的，因为“标志”必须与系列中的特定值相关联。如何找到某个值在轴上的位置？有没有办法找到转换矩阵或其他东西。或者，我可以使用任何内部函数吗？

Answer 1

使用 elements 父类试试这个。

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