nvd3.js - 在 Nvd3.js 中使用图像作为标签

Question

我想使用图像代替文本标签绘制带有 Nvd3 的离散条形图。可能吗 ？如果是这样，如何？

Answer 1

我认为这是不可能的，但您可以直接使用 d3 将图像放在任何您想要的位置，例如：

d3.select("#chart1 svg").append("svg:image")
        .attr("xlink:href", "img/20.png")
        .attr("width", 70)
        .attr("height", 105)
        .attr("x", 160)
        .attr("y",100);

Answer 2

它不是 API 的一部分，但你可以破解它。

例如，要将 x-labels 替换为图像，请执行以下操作：

d3.selectAll('#yourChartId svg .nv-x.nv-axis.nvd3-svg g g g.tick')
  .select('text')
  .remove();

d3.selectAll('#yourChartId svg .nv-x.nv-axis.nvd3-svg g g g.tick')
  .append('svg:image')
  .attr('xlink:href', 'images/myimage.png')
  .attr('width', 40)
  .attr('height', 40);