наведите курсор мыши на вершину при помощи d4.v4

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

Чтобы переместить круг по другим кругам, вам нужно добавить его заново (см. здесь ):

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)     
        });

Рабочий код здесь