c3js/c3

Adding a horizontal line similar to vertical line under mouse

blazespinnaker opened this issue · 1 comments

blazespinnaker commented

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