c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

Adding a horizontal line similar to vertical line under mouse #2828

Open blazespinnaker opened 3 years ago

blazespinnaker commented 3 years ago

Perhaps the owner when he returns can enable discussions. These aren't really PRs, but I find them useful and hopefully others will to

I added a feature to add horizontal lines to help supplement the vertical line under the mouse. Might not be the best way, very open to pointers.


 function followMouse(cname) {
        console.log("followmouse")
        var horizontal = d3.select(cname)
            .append("div")
            .attr("class", "remove")
            .style("position", "absolute")
            .style("z-index", "9999")
            .style("height", "1px")
            .style("width", "600px")
            .style("left", "10px")
            .style("right", "30px")
            .style("top", "0px")
            .style("background", "#000")
            .style("visibility", "hidden")

        d3.select(cname)
        .on("mousemove", function(){  
        var mousey = d3.mouse(this);
        mousey = mousey[1] + 5;
        if (mousey >4 && mousey < 150)
                horizontal.style("top", mousey + "px" )
                .style("visibility", "visible")})
        .on("mouseover", function(){  
        var mousey = d3.mouse(this);
        mousey = mousey[0] + 5;
        if (mousey >4 && mousey < 150)
                horizontal.style("top", mousey + "px")
                            .style("visibility", "visible")})
        .on("mouseout", function(){  
        horizontal.style("visibility", "hidden")});
    }
blazespinnaker commented 3 years ago

nvm, billboard solves this very nicely - https://naver.github.io/billboard.js/demo/#Grid.FocusedGridLines