쿠...sal: [컴] d3 에서 tooltip 그리기

d3 사용 / 툴팁 / 그래프 툴팁 그리기/ 차트 / 챠트 라이브러리 / chart library

codes

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://unpkg.com/d3@6.7.0/dist/d3.min.js"></script>
    <style type="text/css">
    .tooltip {
        position: absolute;
        text-align: center;
        padding: .2rem;
        background: #313639;
        color: #f9f9f9;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
        font-size: .7rem;
    }
    </style>
</head>
<body>

<script type="text/javascript">

// DOM ready
document.addEventListener('DOMContentLoaded', function() {


    var data = [4, 8, 15, 16, 23, 42];

    var x = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, 420]);

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

    d3.select("body")
      .selectAll("div")
        .data(data)
      .enter().append("div")
        .style('border', '1px solid black')
        .style("width", function(data) { 
            return x(data) + "px"; 
        })
        .text(function(data) { 
            return data; 
        })
        .on("mouseover", function(evt, i){
            // 이것으로 div 에 hover 될 때 동작을 변경시킬 수 있다.
            d3.select(this).transition()
                .duration(100)
                .attr("r", 7);
            // 툴팁이 보이게 만들어 준다.
            tooltip.transition()
                .duration(100)
                .style("opacity", 1)
                .text(evt.x);
        })
        .on("mousemove", function(evt){
            const target = event.currentTarget
            return tooltip.style("top", (evt.y-10)+"px").style("left",(evt.x+10)+"px");
        })
        .on("mouseout", function(){
            d3.select(this).transition()
                .duration(200)
                .attr("r", 5);
            tooltip.transition()
                .duration(200)
                .style("opacity", 0);
        });

});
    

</script>
</body>
</html>

Reference

Axe d3.event? · Issue #191 · d3/d3-selection · GitHub : d3.event 는 deprecated 됐다.
d3.js mouse-over effects for your scatter plot | by KJ Schmidt | Medium

쿠...sal

[컴] d3 에서 tooltip 그리기

d3 에서 tooltip 그리기

codes

See also

Reference

댓글 없음:

댓글 쓰기