Как добавить изображение внутри гистограммы nvd3?

Question

Как добавить изображение внутри гистограммы nvd3?

0

Я реализовал диаграмму d3 в моем проекте. Однако теперь мне нужно добавить небольшое изображение над каждым баром, и, щелкнув по изображению, мне нужно перенаправить на новую страницу, чтобы показать дополнительную информацию. Как я могу это достичь?
заранее спасибо

Faysal Ahmed 25 сен. 2013, в 12:54

Источник

Теги:

jquery

d3.js

nvd3.js

1 ответ

Ещё вопросы

Lars Kotthoff · Accepted Answer · 2013-09-25T08-45-00.000Z

Для этого вам нужно будет выбрать элементы, содержащие бары, и добавить к ним изображения. Элементы изображения будут находиться внутри элементов привязки, которые задают целевые объекты ссылки. Код будет выглядеть примерно так.

svg.selectAll(".nv-bar")
   .append("a")
   .attr("xlink:href", newPage)
   .append("image")
   .attr("xlink:href", imageURL);

Обратите внимание, что вам нужно будет отрегулировать положение изображения, которое должно появиться над панелью, то есть что-то вроде .attr("transform", "translate(0,-20)") - точные значения будут зависеть от размера ваше изображение.

Привет, я попытался svg.selectAll («. Nv-bar»), он ответил [TypeError: Невозможно прочитать свойство '1' из неопределенного] Однако записал d3.selectAll (“. Nv-bar”), возвращающий массив. Я попробовал код, который вы дали, но все еще не работал. Я загрузил свои коды в bitbucket.org/FaysalAhmed/nvd3_issue/src/… Надеюсь, это поможет понять проблему, с которой я столкнулся.
Не могли бы вы объяснить более подробно, пожалуйста? Код в ответе - всего лишь руководство - вы не можете просто скопировать и вставить его. Как это не работает?
Код, который я дал в bitbucket, работает, и это пример, правда. На самом деле я изучаю d3js и внедряю его в проект, и необходимо добавить изображение над каждым столбцом в столбчатой диаграмме. Мне нужен один пример или идея, с помощью которой я могу добавить изображение над столбчатой диаграммой. 
Вот подтверждение концепции: jsfiddle.net/9T8QZ Вам, очевидно, нужно адаптировать это, чтобы соответствовать вашим требованиям.