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

你正在选择所有工具提示＆＃39;在你的onmouseover事件中，你需要只选择子工具提示并放置样式然后附加html，只需更新你的onmousever：

.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＆gt; div有一些风格我试过它在你的jsfiddle链接

d3 js工具提示不会显示

1 个答案: