d3 / html расположение всплывающей подсказки - PullRequest
Новая
       11

d3 / html расположение всплывающей подсказки

0 голосов
/ 31 мая 2019

Это простой тест, чтобы понять способ создания всплывающей подсказки, используя div. Я изо всех сил пытаюсь найти подсказку div, где находится круг.

Вместо "d3.select (this) .attr (" cx ")" в атрибуте div я попытался «d3.mouse (this)» и «event.pageX», но div остается ниже svg независимо от этого.

Вот снимок кода. 

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div")
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", (d3.select(this).attr("cx")) + "px")
        .style("top", (d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}

Может кто-нибудь дать мне знать, что мне не хватает?

1 Ответ

0 голосов
/ 31 мая 2019

Вам не хватает необходимого CSS для позиционирования <div>.Просто добавив position: absolute; ( docs ), вы поместите подсказку div по желанию.

Я знаю, что это не требует особых объяснений, но я давно не был на SO, поэтому просто пытался вернуться в канавку.: p

В любом случае, если вы позиционируете div на d3.event.pageX и d3.event.pageY, вот как это будет выглядеть: 

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div").classed('tooltip', true)
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", d3.event.pageX+'px')//(d3.select(this).attr("cx")) + "px")
        .style("top", d3.event.pageY+'px') //(d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}
div#visualisation div.tooltip {
  position: absolute;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualisation">

</div>

Если вы поместите его в определенный x, y (как в вашем фрагменте), он будет выглядеть следующим образом: 

var margin = {top:20, right: 20, bottom: 20, left: 20};

var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", 960)
            .attr("height", 600);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


g.append("circle")
    .attr("class", "circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red")
    .style("opacity", 0.5);

var tooltip = d3.select("#visualisation")
            .append("div").classed('tooltip', true)
            .style("visibility", "hidden");

d3.select(".circle")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)

function mouseover() {

    d3.select(this)
        .transition()
        .duration(500)
        .style("opacity", "1");

    tooltip
        .style("visibility", "visible")
        // .style("opacity", 1)
} 

function mousemove() { 

    tooltip.html("is it visible?")
        .style("left", (d3.select(this).attr("cx")) + "px")
        .style("top", (d3.select(this).attr("cy")) + "px")

}

function mouseout() {

    d3.select(this)
        .transition()
        .duration(500)  
        .style("opacity", 0.5);

    tooltip
        .style("visibility", "hidden")
        // .style("opacity", 0);
}
div#visualisation div.tooltip {
  position: absolute;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualisation">

</div>

Дополнения :

  1. В эту подсказку добавлен класс 'tooltip'div.

  2. Добавлено pointer-events: none;, чтобы избежать мерцания всплывающей подсказки (уберите ее, и вы заметите разницу)

Надеюсь, что этопомогает.

...