javascript - D3.js 雷达图工具提示

Question

基于 this D3.js 雷达图示例，我正在尝试使用更高级的工具提示类型。我不想只是一个数字，而是想显示一个名称和数字列表，其中一些基于我的数据集。

问题出在这部分代码:

blobCircleWrapper.selectAll(".radarInvisibleCircle")
                        .data(function(d,i) { return d; })
                        .enter().append("circle")
                        .attr("class", "radarInvisibleCircle")
                        .attr("r", cfg.dotRadius*1.5)
                        .attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
                        .attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
                        .style("fill", "none")
                        .style("pointer-events", "all")
                        .on("click", function(d,i) {   // TOOLTIP WITH SUBJECTS AND AVERAGES HERE
                            newX =  parseFloat(d3.select(this).attr('cx')) - 10;
                            newY =  parseFloat(d3.select(this).attr('cy')) - 10;

                            tooltip
                                .attr('x', newX)
                                .attr('y', newY)
                                .html(d.value+ "<br>" + "To:")
                                .transition().duration(200)
                                .style('opacity', 1);
                        })
                        .on("mouseout", function(){
                            tooltip.transition().duration(200)
                                .style("opacity", 0);
                        });


                    //Set up the small tooltip for when you hover over a circle
                    var tooltip = g.append("text")
                        .attr("class", "tooltip")
                        .style("opacity", 0);

工具提示是为雷达的圆圈设置的，当我尝试创建一个 div 元素而不是 text 元素时，工具提示停止显示，尽管元素已创建并定位良好。我正在尝试这样的事情:

var tooltip = g.append("div")
                        .attr("class", "tooltip")
                        .style("opacity", 0);

我确定我在这里遗漏了一些属性，但是有没有办法获得更完整的工具提示？谢谢。

Answer 1

您正在使用 <div>作为工具提示。因此，这里有一些不同的规则。

首先，您不能将 div 附加到 SVG(我假设您代码段中的 g 选择是一个 SVG 组)。您必须将 div 附加到正文(或任何其他 HTML 元素)。

其次，当您将 div 附加到 HTML 时，您不能设置 x和 y位置作为属性。相反，你必须使用 event.pageX和 event.pageY , 与 absolute div 的位置。

这是一个非常简单的演示，其中包含我刚才所说的基础知识:

var tip = d3.select("body")
    .append("div")
    .attr("class", "tip")
    .style("opacity", 0);

d3.select("svg")
    .selectAll("foo")
    .data(d3.range(7))
    .enter()
    .append("circle")
    .attr("cx", d => 20 + d * 40)
    .attr("cy", 50)
    .attr("r", 15)
    .attr("fill", "teal")
    .on("mousemove", (d, i) => {
        tip.html("This is the<br>circle number " + i)
            .style("left", d3.event.pageX + 10 + "px")
            .style("top", d3.event.pageY + "px")
            .style("opacity", 1)
    }).on("mouseout", () => {
        tip.style("opacity", 0)
    })

.tip{
  position: absolute;
  padding: 10px;
  background: lightgray;
  border: 1px solid black;
  pointer-events: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>