Question

我使用dimple.js生成了一个条形图，我的条形图是一个带有两个系列的堆积条。当我将鼠标悬停在条形图上时，我需要一个自定义的工具提示，并且当我将鼠标悬停在条形图上时，我可以获得工具提示。当我悬停在一个系列（一个条形图的堆栈）上时，工具提示出现，当我离开条形图时，工具提示正确消失但是如果我将鼠标悬停在一个系列上并直接移动到另一个系列（另一个条形图堆栈）工具提示卡住并且在离开栏时工具提示不会消失。请帮帮我。

var yMax = 520; // overriding y axis
var popup;
        var score=8000/100;
        var svg = dimple.newSvg("#chartContainer", 600, 600);
        var data = [{
            "Brand":"A", 
            "Day":"Mon", 
            "SalesVolume":100 },
            { 
            "Brand":"B", 
            "Day":"Mon", 
            "SalesVolume":200 }];
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(100, 50, 300, 300)
        var x = myChart.addCategoryAxis("x", "Day");
        var y = myChart.addMeasureAxis("y", "SalesVolume");
        y.overrideMax = yMax;
         y.addOrderRule("SalesVolume");
        var s = myChart.addSeries("Brand", dimple.plot.bar);
        s.barGap=0.7;
        myChart.addLegend(120, 400, 300, 30, "left");

        s.addEventHandler("mouseover", onHover);

        s.addEventHandler("mouseleave", onLeave); 

        myChart.draw();

        //d3.selectAll("rect").on("mouseover", null);

        var defs = svg.append("g");
        defs.append("marker")
        .attr("id", "triangle-start")
        .attr("viewBox", "-5 -5 10 10")
        .attr("refX", -1)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1", (y._scale(score)))
        .attr("y2",(y._scale(score)))
        .attr('stroke','black')
        .attr("marker-end", "url(#triangle-start)")
        .style("stroke-dasharray", "3");    

var defs1 = svg.append("g");
        defs1.append("marker")
        .attr("id", "triangle-start1")
        .attr("viewBox", "-5 -5 10 10")
        .attr("refX", -1)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1",200)
        .attr("y2",200)
        .attr('stroke','black')
        .attr("marker-start", "url(#triangle-start1)")
        .style("stroke-dasharray", "3");

        function onHover(e) {
            console.log("on enter");
            var cx = parseFloat(e.selectedShape.attr("x")),
                    cy = parseFloat(e.selectedShape.attr("y"));

                // Set the size and position of the popup
                var width = 150,
                    height = 70,
                    x = (cx + width + 10 < svg.attr("width") ?
                         cx + 10 :
                cx - width - 20);
                    y = (cy - height / 2 < 0 ?
                        15 :
                        cy - height / 2);

                // Create a group for the popup objects
                popup = svg.append("g");

                // Add a rectangle surrounding the text
                popup .append("rect")
                        .attr("x", x + 5)
                        .attr("y", y - 5)
                        .attr("width", 150)
                        .attr("height", height)
                        .attr("rx", 5)
                        .attr("ry", 5)
                        .style("fill", 'white')
                        .style("stroke", 'black')
                        .style("stroke-width", 2);
                // Add multiple lines of text

        }

        function onLeave(e) {
            console.log("on Leave");
            if (popup !== null) {
                    popup.remove();
                }

        }

http://jsfiddle.net/keshav_1007/f4warsnu/4/ - 这是我的小提琴

Answer 1

我认为某些浏览器已发生变化。你的小提琴适合我，但我已经看到你之前描述的行为。您可以尝试玩我认为的不同事件＆＃34; mouseenter＆＃34;和＃34; mouseout＆＃34;可能会更加一致。

自定义工具提示卡在Dimple.js中

1 个答案: