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

I want to add eclipse with tooltip in Legend in Line chart in D3.js

I attached my working JSFiddle with Legend here

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

`

Not able to set eclipse with tooltip if Legend name is too long

I need like this enter image description here

I search here but all examples I found for word wrap in Legend so please help me to set eclipse with tooltip.

Answer

You need to use substring to show few characters of legend and then append a title. It will be like below. I modified your legend text part.

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

enter image description here