Question

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

问题在于代码的这一部分：

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，并为div设置absolute位置。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

D3.js雷达图工具提示

1 个答案: