javascript - 通过将其附加到圈子，Mouseover在d3.js中不起作用(Mouseover is not working in d3.js by attaching it to circles)

Question

I am trying to create a scatter graph along with zoom with brush facility.(我正在尝试创建带有画笔功能的散点图以及缩放。)

But somehow i am not able to show tooltip, even .on("mouseover") is not working.(但是以某种方式我无法显示工具提示，即使.on（“ mouseover”）也不起作用。) Not able to track down the exact problem.(无法找到确切的问题。) You can see the code in JSFiddle(您可以在JSFiddle中查看代码) let svg = d3.select("#scattergraph").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let scatter = svg.append("g") .attr("id", "scatterplot") .attr("clip-path", "url(#clip)"); scatter.selectAll(".dot") .data(data) .enter() .append("circle") .attr("class", "dot") .attr("r", function (d) { const radius = (d.size / maxSize) * 10; if (radius < 4) { return radius + 3 } return radius + 2; }) .attr("cx", function (d) { return x(d.x); }) .attr("cy", function (d) { return y(d.y); }) .attr("opacity", 0.5) .attr("stroke-width", 1) .attr("stroke", "black") .style("fill", 'aqua') .on("mouseover", function(){ console.log('doing mouseovr') })   ask by TrickOrTreat translate from so

Answer 1

you said you need tooltip, right?(你说你需要工具提示，对吗？)

In my previous project, I have used title as a tooltip.(在上一个项目中，我使用title作为工具提示。) I think title is the easy way to show as a tooltip.(我认为标题是显示为工具提示的简单方法。) have u tried it?(你尝试过吗？) maybe i have used something like .append("svg:title") .(也许我使用了.append("svg:title") 。) also i had bookmarks a link, this link give you details about tooltip in d3.js.(我也有一个书签链接，此链接为您提供了有关d3.js中工具提示的详细信息。) this link contain live example of tooltip, d3 tooltip(此链接包含d3工具提示的实时示例) d3.select(".example_div svg") .append("svg:circle") .on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");});