Question

我正在尝试在我的散点图中实现FishEye lens (Cartesian)。我正在尝试关注this approach，但显然我的选择器已经失败了。

我将FishEye定义为

var fisheye = d3.fisheye.circular().radius(120);

svg.on("mousemove", function() {
    fisheye.focus(d3.mouse(this));

    console.log("here " + points.selectAll("circle").length);

    points.selectAll("circle").each(function(d) {
        console.log("aaa");
        d.fisheye = fisheye(d); 


        /*points.selectAll("circle")
        .each(function(d) { 
            console.log("???");
          this.attr("cx", function(d) {  return d.fisheye.x; })
          this.attr("cy", function(d) { return d.fisheye.y; })
          this.attr("r", function(d) { console.log("hype"); return 10; });
        }); */
    });
});

我的观点定义为

points = svg.append("g")
    .attr("class", "point")
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) { // Set the x position using the x-scale
        return x(d.x);
    })
    .attr("cy", function(d) { // Set the y position using the y-scale
        return y(d.y);
    })
    .attr("r", 5) // Set the radius of every point to 5
    .on("mouseover", function(d) { // On mouse over show and set the tooltip
        if(!isBrushing){
          tooltip.transition()
               .duration(200)
               .style("opacity", 0.9);

          tooltip.html(d.symbol + "<br/> (" + parseFloat(x(d.x)).toFixed(4)
            + ", " + parseFloat(y(d.y)).toFixed(4) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
        }
      })
      .on("mouseout", function(d) { // on mouseout, hide the tooltip.
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

当我移动鼠标时，带有“here”的console.log是垃圾邮件，并显示正确的金额。但是，每个循环都不会被执行，因为我没有看到“aaa”。我也尝试过使用selectAll("circle")，但这也不起作用。

我做错了什么，如何让我的FishEye工作？

D3 js selectAll每个都不迭代

0 个答案: