D3.js雷达图工具提示

Question

Based on this example of a D3.js radar chart, I'm trying to have a more advanced type of tooltips. Instead of just a number, I want to show a list of names and numbers, some of them based on my dataset.

The problem is in this part of the code:

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

The tooltip is set for the circles of the radar, and when I try to create a div element instead of the text element, the tooltip stops showing, although the element is created and well positioned. I was trying something like this:

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

I'm sure I'm missing some attributes here, but is there a way to have more complete tooltips? Thank you.

Answer 1

You're using a <div> as tooltip. Thus, you have some different rules here.

First, you cannot append a div to a SVG (I suppose that the g selection in your snippet is a SVG group). You'll have to append the div to the body (or any other HTML element).

Second, as you're appending the div to the HTML, you cannot set the x and y positions as attributes. Instead of that, you'll have to use event.pageX and event.pageY , with an absolute position for the div.

Here is a very simple demo with the basics os what I just said:

 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>