D3.js D3 JS向每个数据圆点添加工具提示，并查找svg元素的悬停事件_D3.js

D3.js D3 JS向每个数据圆点添加工具提示，并查找svg元素的悬停事件

d3.js

D3.js D3 JS向每个数据圆点添加工具提示，并查找svg元素的悬停事件,d3.js,D3.js,我有一个对象数组。这些对象包含一组名为“x”和“y”的属性。现在，当我遍历数组时，我将每个对象的圆附加到数组中，并将这些坐标作为圆的中心。我试图在每个圆的鼠标悬停上附加一个工具提示，显示圆的x和y坐标。我面临的两个问题是 1.如何将div元素附加到每个圆 2.如何获取圆圈的悬停事件？请帮忙 <!doctype html> <html> <head> <title>D3 Basics</title&

我有一个对象数组。这些对象包含一组名为“x”和“y”的属性。现在，当我遍历数组时，我将每个对象的圆附加到数组中，并将这些坐标作为圆的中心。我试图在每个圆的鼠标悬停上附加一个工具提示，显示圆的x和y坐标。我面临的两个问题是 1.如何将div元素附加到每个圆 2.如何获取圆圈的悬停事件？请帮忙

   <!doctype html>
    <html>
      <head>
        <title>D3 Basics</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
      </head>
      <body>
        <script>
          var data=[
            {"x":"100","y":"20"},
            {"x":"102","y":"22"},
            {"x":"200","y":"30"},
            {"x":"500","y":"40"},
            {"x":"500","y":"30"}
          ];

          var svgHeight=800;
          var svgWidth=800;
          var margin=50;

          var divelement=d3.select("body")
            .append("div")
            .attr("height",svgHeight)
            .attr("width",svgWidth)
            .attr("style","border:1px solid black;");

          var svgElement=divelement.append("svg")
            .attr("height",svgHeight)
            .attr("width",svgWidth);

          var boxGroupElement=svgElement.append("g")
            .attr("transform","translate("+margin+","+margin+")");


          //appending data circle points        
          for (var a=0; a<data.length; a++) {
           boxGroupElement.append("circle")
              .attr("cx",data[a].x)
              .attr("cy",data[a].y)
              .attr("r","3")
              .attr("fill","yellow")
              .attr("stroke","blue");
          }         
        </script>
      </body>
    </html>


D3基础知识
var数据=[
{“x”：“100”，“y”：“20”}，
{“x”：“102”，“y”：“22”}，
{“x”：“200”，“y”：“30”}，
{“x”：“500”，“y”：“40”}，
{“x”：“500”，“y”：“30”}
];
var svgHeight=800；
var svgWidth=800；
var保证金=50；
var divelement=d3.选择（“主体”）
.附加（“div”）
.attr（“高度”，svgHeight）
.attr（“宽度”，svgWidth）
.attr（“样式”，“边框：1px纯黑；”）；
var svgElement=divelement.append（“svg”）
.attr（“高度”，svgHeight）
.attr（“宽度”，svgWidth）；
var-boxGroupElement=svgElement.append（“g”）
.attr（“转换”、“转换”（“+margin+”，“+margin+”））；
//附加数据圆点
对于（var a=0；a您需要将mouseover事件添加到boxGroupElement.append（“circle”）
类似的内容
boxGroupElement.append("circle")
                  .attr("cx",data[a].x)
                  .attr("cy",data[a].y)
                  .attr("r","3")
                  .attr("fill","yellow")
                  .attr("stroke","blue").on("mouseover", function(d) {
                    div.transition().duration(100).style("opacity", .9);
                    div.html("My Tooltip" + "<br/>" +d )
                    .style("left", (d3.event.pageX) + "px")
                    .style("top",(d3.event.pageY - 28) + "px")
                   .attr('r', 8);
                   d3.select(this).attr('r', 8)})
                  .on("mouseout", function(d) {
                   div.transition().duration(600).style("opacity", 0)
                   d3.select(this).attr('r', 3);
                   });

boxGroupElement.append（“圆”）
.attr（“cx”，数据[a].x）
.attr（“cy”，数据[a].y）
.attr（“r”、“3”）
.attr（“填充”、“黄色”）
.attr（“笔划”、“蓝色”）。打开（“鼠标悬停”，功能（d）{
div.transition（）.duration（100）.style（“不透明度”，.9）；
div.html（“我的工具提示”+”
“+d）
.style（“左”，“d3.event.pageX）+“px”）
.style（“顶部”（d3.event.pageY-28）+“px”）
.attr（'r'，8）；
d3.选择（this.attr（'r'，8）}）
.开启（“鼠标出”，功能（d）{
div.transition（）.duration（600）.style（“不透明度”，0）
d3.选择（this）.attr（'r'，3）；
});

这是一份工作。
我已将此标记为重复，但这里可以学习一些东西
创建圆的位置：
for (var a=0; a<data.length; a++) {
           boxGroupElement.append("circle")
              .attr("cx",data[a].x)
              .attr("cy",data[a].y)
              .attr("r","3")
              .attr("fill","yellow")
              .attr("stroke","blue");
          } 

这将不起作用，因为没有数据附加到您的选择中。解决方法如下：
 var circles = boxGroupElement.selectAll('circle')
   .data(data)
   .enter()
   .append('circle')
   .attr("cx", function(d) {
     return d.x
   })
   .attr("cy", function(d) {
     return d.y
   })
   .attr("r", "3")
   .attr("fill", "yellow")
   .attr("stroke", "blue")

现在是工具提示。我已经在上面引用了：
第二个答案很准确。下面是它的工作原理：
为工具提示添加一个div，并将可见性设置为隐藏（以便在鼠标悬停时可见）：
鼠标悬停在一个节点上显示数据。这里我已经显示了位置。请记住，如果您坚持使用原始方法创建圆，这种方法将不起作用，因为您将无法找到数据：
.on("mouseover", function(d) {
     tooltip.text("Pos : " + d.x + ' : ' + d.y);

     return tooltip.style("visibility", "visible");
   })
   .on("mousemove", function() {
     return tooltip.style("top",
       (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
   })
   .on("mouseout", function() {
     return tooltip.style("visibility", "hidden");
   });

工作小提琴：
编辑
如果你是坚定的，你想保持它，就像你有以下可能是一个解决办法：
 .on("mouseover", function(d, i) {
       tooltip.text("Pos : " + data[i].x + ' : ' + data[i].y);

       return tooltip.style("visibility", "visible");
     })
     .on("mousemove", function() {
       return tooltip.style("top",
         (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
     })
     .on("mouseout", function() {
       return tooltip.style("visibility", "hidden");
     });

更新了此解决方案的fiddle：
 .on("mouseover", function(d, i) {
       tooltip.text("Pos : " + data[i].x + ' : ' + data[i].y);

       return tooltip.style("visibility", "visible");
     })
     .on("mousemove", function() {
       return tooltip.style("top",
         (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
     })
     .on("mouseout", function() {
       return tooltip.style("visibility", "hidden");
     });

同样，在鼠标上方，您不能使用data[a].x
，因为这将始终返回数据的最后一个元素、闭包等，因此我使用data[I].x
，它将为您提供正在鼠标移动的当前圆：）可能的重复
 .on("mouseover", function(d, i) {
       tooltip.text("Pos : " + data[i].x + ' : ' + data[i].y);

       return tooltip.style("visibility", "visible");
     })
     .on("mousemove", function() {
       return tooltip.style("top",
         (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
     })
     .on("mouseout", function() {
       return tooltip.style("visibility", "hidden");
     });