在dimple.js中自定义圆环图的工具提示

Question

我想我的圆环图工具提示看起来像这样：

到目前为止，我已尝试过基于http://annapawlicka.com/pretty-charts-with-dimple-js/

的代码段

// Handle the hover event - overriding the default behaviour
s.addEventHandler("mouseover", onHover);
// Handle the leave event - overriding the default behaviour
s.addEventHandler("mouseleave", onLeave);

myChart.draw();

function onHover(e) {
    // Get the properties of the selected shape
    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",5)
            .attr("y",5)
            .attr("width", 100)
            .attr("height", 20)
            .attr("rx", 5)
            .attr("ry", 5)
            .style("fill", 'white')
            .style("stroke", 'black')
            .style("stroke-width", 2);


    // Add multiple lines of text
    popup
            .append('text')
            .attr('x', 17)
            .attr('y', 17)
            .text(e.seriesValue[0])
            .style("font-family", "sans-serif")
            .style("font-size", 10);
            }

function onLeave(e) {
                // Remove the popup
                if (popup !== null) {
                    popup.remove();
                }
            }

我在获取所选形状的位置时遇到问题，因为这部分代码似乎不适用于圆环图。

var cx = parseFloat(e.selectedShape.attr("x")),
    cy = parseFloat(e.selectedShape.attr("y"));

这就是为什么我不使用cx或cy，因为我有NaN。其余代码似乎工作正常，我可以编辑文本，文本颜色，背景和其他一些东西。

我想知道如何获得悬停形状的位置，如果它可能（我想我要求太多了......），得到矩形工具提示的箭头形式（无论它叫什么）。

Answer 1

Here 是使用John指出的d3的解决方案。

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>   

JS

var path = e.selectedShape[0][0];

var d3path = d3.select(path);

var box = d3path.node().getBBox();

Answer 2

您的工作原理，但此选项可使工具提示样式与悬停在图表上的部分相同。试试这个：

ring.getTooltipText = function (e) {
    return [
        e.aggField[0]
    ]};

这是您更新的jsbin：http://jsbin.com/gogeqajegice/3/edit