Javascript 获取d3.svg.symbol（）中心

我正在使用函数

d3.svg.symbol（）

在散点图上绘制符号。我想在鼠标上的符号上显示一些工具提示。为了相应地放置它们，我需要得到符号的中心，但我真的不知道如何做到这一点。我用来生成符号的代码是：

var symbols = svg.append("g")
            .attr("id", "circles")
            .selectAll("path")
            .data(dataset)
            .enter()
            .append("path")
            .attr("transform", function (d) { return "translate(" + x(d[SelX]) + "," + y(d[SelY]) + ")"; })
            .attr("d", d3.svg.symbol()
                .size(50)
                .type(function (d) { if (d.Spaziatura == "Proportional") { return "circle";} else { return "diamond"; }; }))
            .attr("fill", function (d) {
                if (d.Grazie == "Sans") { return colore(parseFloat(d[SelCol])); } 
                else { return colore2(parseFloat(d[SelCol])); };
                })
            .attr("id", function (d) { return d.FamilyName;})
            .attr("opacity", 1)
            .attr("visibility", "visible")

然后鼠标悬停事件：

        .on("mouseover", function (d) {

            //Get this symbbol's x/y values, then augment for the tooltip
            var centroid = symbols.centroid(d);
            var xPosition = centroid[0];
            var yPosition = centroid[1];

            //Update the tooltip position and value
            svg .append("text")
                .attr("class", "tooltip")
                .attr("x", xPosition)
                .attr("y", yPosition - (height/20))
            //and then other stuff happens

---

我尝试重用用于贴图的质心函数，但它不起作用。我只需要找到符号路径的中心就可以了，所以非常感谢您的帮助，谢谢

您可以像这样获得符号的中心（在鼠标处理程序中）：

---

演示。

你能得到边界框并计算它的中心吗？我从来没有真正使用过BBox，将使用d3来研究它。选择（this）.node（）.getBBoxNevermind，with.node（）我得到所有符号的相同BBox，也许它是在所有符号上计算出来的，因为它们是一个大的元素？你能提供一个完整的JSFIDLE示例吗？

var bibox = this.getBBox(),
    t = d3.transform(d3.select(this).attr("transform")),
    centroidX = t.translate[0] + (bibox.x + bibox.width)/2,
    centroidY = t.translate[1] + (bibox.y + bibox.height)/2;