D3.js 如何在折线图中的图例中添加带有 eclipse 的工具提示

Question

我想在 D3.js

的折线图中的图例中添加带有工具提示的 eclipse

我附上了我的工作 JSFiddle 和 Legend here

var legend = svg.append("g")
  .attr("class", "legend")
  .attr("height", 100)
  .attr("width", 100).attr('transform', 'translate(-20,0)');

`

如果 Legend 名称太长，则无法使用工具提示设置 eclipse

我需要这样

我在这里搜索，但我在 Legend 中找到了自动换行的所有示例，所以请帮助我使用工具提示设置 eclipse。

Answer 1

您需要使用子字符串来显示图例的几个字符，然后附加一个标题。它会像下面这样。我修改了你的图例文本部分。


       legend.selectAll('text')
      .data((this.materialGraphDataSource[0].materials))
      .enter()
      .append("text")
      .attr("x", width - 140)
      .attr("y", function (d, i) { return i * 20 + 9; })
      .text(function (d, i) {
        var text = d.materialName;
        return text.substring(0,20)+ "...";
      })
      .style("font-size", "10px")
      .append('title').text(function (d, i) {
        var text = d.materialName;
        return text;
      });

D3.js 如何在折线图中的图例中添加带有 eclipse 的工具提示

How to add tooltip with eclipse in legend in line chart in D3.js

d3.js

angularjs