javascript - d3 js 工具提示不会显示

Question

不确定我在这里可能做错了什么，但我的工具提示没有显示。我有一个预先存在的 svg，我想将一个简单的空矩形作为工具提示(稍后将向每个工具提示添加饼图)附加到每个路径。当我将鼠标悬停在上面时，它会显示描边颜色的变化，但不显示工具提示。

我的代码:

    var w = 500,
        h = 500;

    var tooltip = d3.select("#level_0")
                   .selectAll("path")
                   .append("svg:svg")
                   .attr("class", "tooltip")
                   .style("opacity", 0)
                   .attr("width", w)
                   .attr("height", h)
                   .append("svg:g");

var main_svg =  d3.select("#level_0")
               .selectAll("path")
               .data(data_clean)

             .on("mouseover", function(d) {
                d3.select(this)
                 .style("stroke-width", "3px")
                 .style("stroke", "#000")
                 tooltip.append("rect")
                .attr("class", "bar");
                 tooltip.transition()
                .   duration(200)
                    .style("opacity", .9);
            });

这是 jsfiddle https://jsfiddle.net/n5v84svm/

Answer 1

您正在 onmouseover 事件中选择所有“工具提示”，您只需选择子工具提示并放置样式，然后附加 html，只需将您的 onmouseever 更新为:

.on("mouseover", function(d) {
                d3.select(this)
                 .style("stroke-width", "3px")
                 .style("stroke", "#000");

    d3.select(this).select('#tooltip')
              .style("opacity", "1")
                  .style("display", "block")
              .append("div")
              .attr("class", "data")
              .html(d.data_clean)
                  .transition()  //Opacity transition when the tooltip appears
                  .duration(500);

});

还向工具提示 div 添加一些数据以显示 CSS position 样式

这是另一种解决方案，不要在路径中添加工具提示 div，只需将其添加到主 div 中，然后就可以向其中附加数据

     .on("mouseout", function () {
    d3.select(this)
    .style("stroke-width", "1px")
    .style("stroke", "#888888");

     tooltip.selectAll('.data').remove();
})



.on("mouseover", function(d) {
                d3.select(this)
                 .style("stroke-width", "3px")
                 .style("stroke", "#000");

     tooltip.  style("opacity", "1")
                  .style("display", "block")
              .append("div")
              .attr("class", "data")
              .html(d.data_clean)
                  .transition()  //Opacity transition when the tooltip appears
                  .duration(500);

我将工具提示更改为

var tooltip = d3.select("#viz")               
           .append("div")
           .attr("id", "tooltip")
           .style("opacity", 0)
           .attr("width", w)
           .attr("height", h);

只需更新您的 CSS #tooltip 即可 top: 20px; left:20px 你也可以设置 #tooltip > div 的样式来获得一些样式，我尝试过它在你的 jsfiddle 链接中有效