Как добавить изображение в легенду piechart nvd3?

Я хочу добавить изображение в легенду nvd3 piechart вместо текста. У меня есть этот код, но он меняет только текст в всплывающей подсказке с изображением. Я хочу изменить и текст в легенде с тем же изображением.Как добавить изображение в легенду piechart nvd3?

var testdata = [ 
{ 
    key: "<img src="+"./imgs/facebook.jpg"+">", 
    y: 1 
}, 
{ 
    key: ""<img src="+"./imgs/twitter.jpg"+">"", 
    y: 2 
} ]; 
nv.addGraph(function() { 

var chart = nv.models.pieChart() 
    .x(function(d) { return d.key}) 
    .labelThreshold(.08) 
    .showLabels(true) 
    .color(d3.scale.category10().range()) 
    .donut(true); 



    chart.pie.donutLabelsOutside(true).donut(true); 

    d3.select("#mypiechart") 
    .datum(testdata) 
    .transition().duration(1200) 
    .call(chart); 

return chart;});

Любые идеи?

источник

2013-12-01 Anonymous

Это невозможно в настоящее время с nvd3.js. Всплывающая подсказка работает, потому что указанный вами элемент img установлен в div, который не содержится в элементе svg. Это не работает для ярлыков легенды или диаграмм, поскольку они создаются с использованием элементов svg text. Чтобы показать изображение в пределах графика svg, нам нужно будет использовать элемент svg image.

Мы могли бы построить элементы svg image, если мы взломаем код nvd3.js. Вот схема того, что вы могли бы сделать, чтобы заставить легенду работать. Затем вы можете решить, хотите ли вы попробовать что-то подобное в коде nv.models.pie для ярлыков диаграмм или если вы просто хотите установить chart.showLabels в false в конфигурацию диаграммы.

Добавить новый ключ в ваших данных, чтобы указать путь изображения:

var testdata = [ 
{ 
    key: "<img src="+"./imgs/facebook.jpg"+">", 
    y: 1, 
    image_path: "./imgs/facebook.jpg" 
}, 
{ 
    key: "<img src="+"./imgs/twitter.jpg"+">", 
    y: 2, 
    image_path: "./imgs/twitter.jpg" 
} ];

Update nv.models.legend код, чтобы показать изображение:

seriesEnter.append('circle') 
    .style('stroke-width', 2) 
    .attr('class','nv-legend-symbol') 
    .attr('r', 5); 
// Add an svg image into the legend 
seriesEnter.append('image') 
    .attr('xlink:href', function(d) { return d.image_path}) 
    .attr('height',20) 
    .attr('width',20) 
    .attr('y', '-10') 
    .attr('x', '8');

Update nv.models.legend код не показывать ключ:

// Don't add the key value into the legend text 
//series.select('text').text(getKey);

Обновить код nv.models.legend рассмотреть ширину изображения при определении схемы легенды:

//seriesWidths.push(nodeTextLength + 28); // 28 is ~ the width of the circle plus some padding 
//Include image width... 
seriesWidths.push(nodeTextLength + 48);

источник

2013-12-03 18:34:22 cschroed

Как добавить изображение в легенду piechart nvd3?

ответ

Смежные вопросы