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

时间:2016-09-29 11:09:56

标签: javascript d3.js svg charts c3.js

我试图将图像添加到图表中 - 例如旋转的条形图。目的是在视觉上设定系列的目标,如旗帜。

我可以在创建图表后添加图像作为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");

但它不能用于我想要的东西,因为'flag'必须链接到系列中的特定值。如何在轴上找到某个值的位置?有没有办法找到转换矩阵或其他东西。或者,我可以使用任何内部功能吗?

1 个答案:

答案 0 :(得分:0)

使用元素父类来尝试这个。

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