如何在 nvd3 饼图图例中添加图像? [英] How can i add an image in nvd3 piechart legend?

问题描述

我想在 nvd3 饼图图例中添加图像而不是文本.我有这个代码，但它只更改了带有图像的工具提示中的文本.我想用相同的图像更改图例中的文本.

I want to add an image in nvd3 piechart legend instead of text. I have this code but it changes only the text in the tooltip with the image. I want to change and the text in the legend with the same image.

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

有什么想法吗?

推荐答案

目前无法使用 nvd3.js.工具提示有效是因为您指定的 img 元素被设置到 div 中，而该 div 未包含在 svg 元素中.它不适用于图例或图表标签，因为它们是使用 svg text 元素构建的.为了在图表 svg 中显示图像，我们需要使用 svg image 元素.

This is not currently possible with nvd3.js. The tooltip works because the img element you have specified is being set into a div that isn't contained within the svg element. It doesn't work for the legend or chart labels because those are built using svg text elements. In order to show an image within the chart svg we'd need to use an svg image element.

如果我们破解 nvd3.js 代码，我们就可以构建 svg image 元素.以下是您可以采取哪些措施来使图例正常工作的概述.然后，您可以决定是否要在 nv.models.pie 代码中尝试类似的图表标签，或者您是否只想设置 chart.showLabels 到 false 在您的图表配置中.

We could build the svg image elements if we hack the nvd3.js code. Here's an outline of what you could do to get the legend working. You could then decide if you'd want to try something similar in the nv.models.pie code for the chart labels or if you'd just want to set chart.showLabels to false in your chart configuration.

在您的数据中添加一个新键以提供图像路径:

Add a new key in your data to provide the image path:

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"
}  ];

更新 nv.models.legend 代码以显示图像:

Update the nv.models.legend code to show the image:

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

更新 nv.models.legend 代码以不显示密钥:

Update the nv.models.legend code to not show the key:

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

更新 nv.models.legend 代码以在确定图例布局时考虑图像宽度:

Update the nv.models.legend code to consider the image width when determining the legend layout:

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

这篇关于如何在 nvd3 饼图图例中添加图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！