Question

这是一个JS Fiddle，显示悬停多维数据集时的工具提示。每当我将鼠标悬停在每个面上时，都会调用工具提示，我希望悬停在整个立方体上只出现一次。我更喜欢如果我可以使用我在小提琴中使用的相同插件，如果不可能，也可以使用其他解决方案。

JS

(function () {
    var paper = Raphael("paper", "100%", "100%");
    var cube2 = paper.set();
    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);


    // second cube
    cube2.push(
    paper.path("M190 200 L260 160 330 200 260 240 190 200"),
    paper.path("M260 240 L330 200 330 280 260 320 260 240"),
    paper.path("M260 240 L260 320 190 280 190 200 260 240"));

    cube2.transform("t0 -80").attr({
        stroke: "#000000",
        opacity: 0
    }).animate(anim.delay(500));

    // hover for set
    function getHoverHandler(setName, fill1, fill2, fill3, swidth) {
        return function () {
            setName[0].attr({
                fill: fill1,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[1].attr({
                fill: fill2,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[2].attr({
                fill: fill3,
                cursor: "pointer",
                    "stroke-width": swidth
            });
        };
    }
    cube2.hover(getHoverHandler(cube2, "#000000", "#1e1e1e", "#282828", 0), getHoverHandler(cube2, "none", "none", "none", 1));
    // function for easy class setting
    function setClass(cubename, attrname) {
        for (var i = 0; i < 3; i++) {
            cubename[i].node.setAttribute("class", attrname);
        }
    }
    // func ends
    setClass(cube2, "secondcube");
    // calling tooltipster on each set
    $('.secondcube').tooltipster({
        content: "second cube",
        position: "left"
    });

})();

Answer 1

就像我告诉过你之前我认为你有两个不同的解决方案，一个是内联SVG和CSS，一个是Rapahael和Javascript。我更喜欢第一个，但我会告诉你两个例子。

使用CSS内联Svg：

HTML:

<body>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g id="cube">
<path id="f1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="f2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="f3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
</svg>
</body>

CSS:

svg {
    position:absolute;
    left:0;
    top:0;
}
#cube {
    fill:white;
    stroke:black;
    cursor:pointer;
}
#cube:hover #f1 {
    fill:black;
}
#cube:hover #f2 {
    fill:#1e1e1e;
}
#cube:hover #f3 {
    fill:#282828;
}

JQUERY:

$('#cube').tooltipster({
    content: "second cube",
    position: "left"
});

http://jsfiddle.net/zd33x1et/

圣拉斐尔：

var R = Raphael("paper");
var coor = [[130,170],[270,90],[410,170],[410,330],[270,410],[130,330]];
var toolText = ["first cube", "second cube", "third cube", "fourth cube", "fifth cube", "sixth cube"];
var cube =[];
var ed = [];
var i = 0;
function ont(n) {
    cube[n].hover(function(){
        cube[n].attr({"fill-opacity":"1"})
    }, function(){
        cube[n].attr({"fill-opacity":"0"})
    });
};
for(i=0;i<coor.length;i++){
R.setStart();
R.path("M0,0l-70,-40 70,-40 70,40 -70,40").attr({fill:"#000"});
R.path("M0,0l70,-40 0,80-70,40 0,-80").attr({fill:"#1e1e1e"});
R.path("M0,0l0,80 -70,-40 0,-80 70,40").attr({fill:"#282828"});
ed[i] = R.path("M0,0l0,80 M0,0l70,-40 M0,0l-70,-40 0,80 70,40 70,-40 0,-80-70,-40-70,40");
ed[i].node.setAttribute("id","edges"+i);
cube[i] = R.setFinish();
cube[i].transform("t" + coor[i][0] + "," + coor[i][1]).attr({"fill-opacity":"0", "cursor": "pointer"});
ont(i);
$('#edges'+i).tooltipster({
    content: toolText[i],
    position: "left"
});
}

http://jsfiddle.net/77nfejnz/2/

Answer 2

使用以下更改将为您提供所需的输出。

(function () {
    var paper = Raphael("paper", "100%", "100%");
    var cube2 = paper.set();
    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);


    // second cube
    cube2.push(
    paper.path("M190 200 L260 160 330 200 260 240 190 200"),
    paper.path("M260 240 L330 200 330 280 260 320 260 240"),
    paper.path("M260 240 L260 320 190 280 190 200 260 240"));

    cube2.transform("t0 -80").attr({
        stroke: "#000000",
        opacity: 0
    }).animate(anim.delay(500));

    // hover for set
    function getHoverHandler(setName, fill1, fill2, fill3, swidth) {
        return function () {
            setName[0].attr({
                fill: fill1,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[1].attr({
                fill: fill2,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[2].attr({
                fill: fill3,
                cursor: "pointer",
                    "stroke-width": swidth
            });
        };
    }
    cube2.hover(getHoverHandler(cube2, "#000000", "#1e1e1e", "#282828", 0), getHoverHandler(cube2, "none", "none", "none", 1));
    // function for easy class setting
    function setClass(cubename, attrname) {
        for (var i = 0; i < 3; i++) {
            cubename[i].node.setAttribute("class", attrname + i);
        }
    }
    // func ends
    for (var i = 1; i <= 3; i++) {
    setClass(cube2, "secondcube"+i);
    }

    // calling tooltipster on each set
    $('.secondcube30').tooltipster({
        content: "second cube",
        position: "left"
    });

})();

检查Fiddle.

只有上半部分悬停才会显示工具提示。

将工具提示应用于Raphael中的一组，而不是每一方

2 个答案: