Блог

Я пытался добавить изображение на диаграмму — например, повернутую гистограмму. Цель состоит в том, чтобы визуально задать цель для серии, например, флаг.

Я мог бы добавить изображение в качестве элемента 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");
  

Но это не работает для того, что я хочу, потому что «флаг» должен быть связан с определенным значением в ряду. Как я могу найти положение определенного значения на оси? Есть ли способ найти матрицу преобразования или что-то в этом роде. Или, есть ли какая-либо внутренняя функция, которую я мог бы использовать?

Попробуйте это с помощью родительского класса 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);