Question

我编写了以下代码（它是一个玩具示例，jsfiddle上的here），以便在悬停形状时显示标签：

var lbl;
var svg = d3.select("#chart").append("svg")
      .attr("width", 200)
      .attr("height", 200);
        svg.append("rect")
      .attr("x", 50)
      .attr("y", 0)
          .attr("width",50)
      .attr("height",50)
          .attr("label","first line"+"<br/>"+"second line")
      .style("fill", "yellow")  
          .on("mouseover",function() {
               var th=d3.select(this);
               lbl=svg.append("text")
                   .attr("x", th.attr("x")*1+th.attr("width")/2)
                   .attr("y", th.attr("y")*1+th.attr("height")/2)
                   .attr("dy", "0.5em")
                   .style("text-anchor", "middle")
                   .style("visibility", "visible")
               .attr("pointer-events", "none")
                   .text(th.attr("label"));
        })
          .on("mouseout",function(){
             lbl.remove();
            });

如何以html格式呈现标签？

Answer 1

你可以制作一个div并给css position:absolute 所以你现在可以定位它了w.r.t.计算顶部和左部。

同样在div中设置文本.html("your html<br> text")

var th=d3.select(this);
               lbl=d3.select("#chart").append("div")
                .attr("class", "tooltip")
                   .style("left", (th.attr("x")*1+th.attr("width")/2) + "px")
                   .style("top", (th.attr("y")*1+th.attr("height")/2) + "px")
                   .html(th.attr("label"));

工作代码here

d3元素

1 个答案: