javascript - 鼠标悬停在 d3 上强制布局气泡不起作用

Question

在my D3 bubble chart here ，我想获得一个工具提示，其中包含有关将鼠标悬停在气泡上的一些信息。

但是，鼠标悬停事件似乎没有被捕获。甚至鼠标悬停时的 console.log("test") 也不起作用。

我是 D3 的新手。我如何让它发挥作用？

jsFiddle

JS:

var data = {
      name: "layout",
      children: [
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "DendrogramLayout", "size": 4853 },
          { name: "ForceDirectedLayout", "size": 8411 },
          { name: "IcicleTreeLayout", "size": 4864 },
          { name: "IndentedTreeLayout", "size": 3174 },
          { name: "Layout", "size": 7881 },
          { name: "NodeLinkTreeLayout", "size": 12870 },
          { name: "PieLayout", "size": 2728 },
          { name: "RadialTreeLayout", "size": 12348 },
          { name: "RandomLayout", "size": 870 },
          { name: "StackedAreaLayout", "size": 9121 },
          { name: "TreeMapLayout", "size": 9191 }
      ]
    };

    var margin = {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var n = data.children.length,
        m = 1,
        padding = 6,
        radius = d3.scale.sqrt().range([0, 12]),
        color = d3.scale.category10().domain(d3.range(m)),
        x = d3.scale.ordinal().domain(d3.range(m)).rangePoints([0, width], 1);

    var nodes = d3.range(n).map(function () {
      var i = Math.floor(Math.random() * m), //color
          v = (i + 1) / m * -Math.log(Math.random()); //value
      return {
        radius: radius(v),
        color: color(i),
        cx: x(i),
        cy: height / 2,
      };

    });

    nodes.forEach(function (item, index) {
        item.radius = data.children[index].size/300;
    });

    var force = d3.layout.force()
        .nodes(nodes)
        .size([width, height])
        .gravity(0)
        .charge(0)
        .on("tick", tick)
        .start();

    var drag = force.drag()
        .on("drag", dragmove);

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

    d3.selectAll('circle')
        .on("mouseover", function(d,i) {
            console.log("test");
            tooltip.transition().duration(200).style("opacity", .9);      
            tooltip.html(data.children[i].name)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
        .on("mouseout", function(d) {       
            tooltip.transition().duration(500).style("opacity", 0);   
        });

    function dragmove(d) {
        var euclideanDistance = Math.sqrt(Math.pow((d.px - 198), 2) + Math.pow((d.py - 198), 2));

        if(euclideanDistance > 198 - d.radius){
            d.px = d.px - 198;
            d.py = d.py - 198;

            var radians = Math.atan2(d.py, d.px);

            d.px = Math.cos(radians) * (198 - d.radius) + 198;
            d.py = Math.sin(radians) * (198 - d.radius) + 198;
        }
    }

    var svg = d3.select("#chart").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 + ")");

    var circle = svg.selectAll("circle")
        .data(nodes)
        .enter().append("circle")
        .attr("r", function (d) {
          return d.radius;
        })
        .style("fill", function (d, i) {
          return "green";
        })
        .call(drag);

    function tick(e) {
      circle.each(gravity(.2 * e.alpha))
          .each(collide(.5))
          .attr("cx", function (d) {
            return d.x;
          })
          .attr("cy", function (d) {
            return d.y;
          });
    }

    // Move nodes toward cluster focus.
    function gravity(alpha) {
      return function (d) {
        d.y += (d.cy - d.y) * alpha;
        d.x += (d.cx - d.x) * alpha;
      };
    }

    // Resolve collisions between nodes.
    function collide(alpha) {
      var quadtree = d3.geom.quadtree(nodes);
      return function (d) {
        var r = d.radius + radius.domain()[1] + padding,
            nx1 = d.x - r,
            nx2 = d.x + r,
            ny1 = d.y - r,
            ny2 = d.y + r;
        quadtree.visit(function (quad, x1, y1, x2, y2) {
          if (quad.point && (quad.point !== d)) {
            var x = d.x - quad.point.x,
                y = d.y - quad.point.y,
                l = Math.sqrt(x * x + y * y),
                r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
            if (l < r) {
              l = (l - r) / l * alpha;
              d.x -= x *= l;
              d.y -= y *= l;
              quad.point.x += x;
              quad.point.y += y;
            }
          }
          return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        });
      };
    }

Answer 1

您的问题是您在创建圆圈之前尝试附加鼠标悬停效果:

d3.selectAll('circle')

将返回一个空的选择，因为这里的这一行在你的代码后面出现:

var circle = svg.selectAll("circle")
    .data(nodes)
    ...

一个简单的解决方案是将鼠标悬停效果代码移到圆圈创建代码下方:

circle.on("mouseover", function(d,i) {
        tooltip.transition().duration(200).style("opacity", .9);      
        tooltip.html(data.children[i].name)  
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px");    
    })                  
    .on("mouseout", function(d) {       
        tooltip.transition().duration(500).style("opacity", 0);   
    });

Here是一个 jsfiddle。