Question

我正在研究angular4并使用d3.v4图的气泡圈。我想在鼠标悬停到该特定圆圈时在顶部显示圆圈（喜欢使用z-index）。

我在HTML中使用以下代码：

<svg width="600" height="600" font-family="sans-serif" font-size="12" text-anchor="middle"></svg>

在component.ts文件中使用代码：

ngOnInit() {

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var format = d3.format(",d");
    var color = d3.scaleOrdinal(d3.schemeCategory20c);

    var pack = d3.pack().size([width, height]).padding(1.5);
    var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);


    var root = d3.hierarchy({children: this.data})
    .sum(function(d:any) { return d.value; })
    .each(function(d:any) {
        if (id = d.data.id) {
            var id, i = id.lastIndexOf(".");
            d.id = id;
            d.package = id.slice(0, i);
            d.class = id.slice(i + 1);
        }
    });

    var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d:any) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
    .attr("id", function(d:any) { return d.id; })
    .attr("r", function(d:any) { return d.r; })
    .style("fill", function(d:any) { return color(d.package); })
    .on("click", function(d:any) {

        console.log("on click get data: " + d.id);

    })

    .on("mousemove", function(d:any) {

        //console.log("on mouse over get data: ",this);
        // d3.select(this).moveToFront();
        var circle = d3.select(this);
        circle.transition().duration(500)
        .attr("r", function(d:any) { return d.r*2; })

        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html(d.id)
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");

    })
    .on("mouseout", function(d:any) {
        //console.log("on mouse out get data: ",this);
        var circle = d3.select(this);
        circle.transition().duration(500)
        .attr("r", function(d:any) { return d.r; })

        div.transition()
         .duration(500)
         .style("opacity", 0);
    })

    .selectAll("tspan")
    .data(function(d:any) { return d.class.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
    .attr("x", 0)
    .attr("y", function(d:any, i:any, nodes:any) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
    .text(function(d:any) { return d; });
}

我在下面提到了链接：

https://bl.ocks.org/mbostock/4063269

但是无法将鼠标移除。帮我，伙计们。先谢谢你。

Answer 1

要将圆圈移到其他圆圈上，您需要重新附加它（参考here）：

d3.selection.prototype.moveToFront = function() {  
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };

然后将（mouseover / mouseout）侦听器添加到节点组，如下所示：

  d3.selectAll(".node").on("mouseover", function(d) {
        d3.select(this).moveToFront();//bring to front
        var circle = d3.select(this).select("circle");//select the circle in the group
        circle.transition().duration(500).attr("r", d => d.r*2)     
        })
      .on("mouseout", function(d) {
        var circle = d3.select(this).select("circle");
        circle.transition().duration(500).attr("r", d => d.r)     
        });

工作代码here

使用d4.v4将鼠标悬停在圆圈顶部

1 个答案: