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

Question

我想在 D3.js 的折线图中的图例中添加带有工具提示的 Eclipse

我在这里附加了我的工作 JSFiddle 和 Legend

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

`

如果图例名称太长，则无法使用工具提示设置 Eclipse

我需要这样

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

标签： angularjsd3.js

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