Javascript 在D3饼图中添加工具提示时出现问题

我正在使用它来构建饼图。我将按照教程在D3中构建饼图。现在我想在饼图的每个部分添加工具提示

我正在尝试使用回调来执行一些事件。像这样

<script>
  var pie = new d3pie("pieChart", {
"header": {
    "title": {
        "text": " ",
        "fontSize": 24,
        "font": "open sans"
    },
    "subtitle": {
        "text": " ",
        "color": "#999999",
        "fontSize": 12,
        "font": "open sans"
    },
    "titleSubtitlePadding": 9
},
"footer": {
    "color": "#999999",
    "fontSize": 10,
    "font": "open sans",
    "location": "bottom-left"
},
"size": {
    "canvasWidth": 590
},
"data": {
    "sortOrder": "value-desc",
    "content": [
        {
            "label": "Google",
            "value": 264131,
            "color": "#D78902"
        },
        {
            "label": "Twitter",
            "value": 118812,
            "color": "#04C3FD"
        },
        {
            "label": "Facebook",
            "value": 157618,
            "color": "#0457FD"
        },
        {
            "label": "Yahoo",
            "value": 114384,
            "color": "#FD0404"
        }
    ]
},
"labels": {
    "outer": {
        "pieDistance": 32
    },
    "inner": {
        "hideWhenLessThanPercentage": 3
    },
    "mainLabel": {
        "fontSize": 11
    },
    "percentage": {
        "color": "#ffffff",
        "decimalPlaces": 0
    },
    "value": {
        "color": "#adadad",
        "fontSize": 11
    },
    "lines": {
        "enabled": true
    }
},
"effects": {
    "pullOutSegmentOnClick": {
        "effect": "linear",
        "speed": 400,
        "size": 8
    }
},
"misc": {
    "gradient": {
        "enabled": true,
        "percentage": 100
    }
},
callbacks: {
    onMouseoverSegment: function(info) {
        alert("hi");
    }
}
});
</script>

var pie=新的d3pie（“pieChart”{
“标题”：{
“标题”：{
“文本”：“，
“字体大小”：24，
“字体”：“开放式SAN”
},
“副标题”：{
“文本”：“，
“颜色”：“#999999”，
“字体大小”：12，
“字体”：“开放式SAN”
},
“标题子标题添加”：9
},
“页脚”：{
“颜色”：“#999999”，
“字体大小”：10，
“字体”：“打开SAN”，
“位置”：“左下角”
},
“尺寸”：{
“画布宽度”：590
},
“数据”：{
“排序器”：“值描述”，
“内容”：[
{
“标签”：“谷歌”，
“价值”：264131，
“颜色”：“D78902”
},
{
“标签”：“推特”，
“价值”：118812，
“颜色”：“#04C3FD”
},
{
“标签”：“Facebook”，
“价值”：157618，
“颜色”：“#0457FD”
},
{
“标签”：“雅虎”，
“价值”：114384，
“颜色”：“FD0404”
}
]
},
“标签”：{
“外部”：{
“距离”：32
},
“内部”：{
“隐藏时小于百分比”：3
},
“主标签”：{
“字体大小”：11
},
“百分比”：{
“颜色”：“ffffff”，
“小数位数”：0
},
“价值”：{
“颜色”：“adadad”，
“字体大小”：11
},
“行”：{
“已启用”：真
}
},
“影响”：{
“pullOutSegmentOnClick”：{
“效果”：“线性”，
“速度”：400，
“尺寸”：8
}
},
“杂项”：{
“梯度”：{
“启用”：正确，
“百分比”：100
}
},
回调：{
onMouseoverSegment：功能（信息）{
警报（“hi”）；
}
}
});

在这里，如果您可以看到我在回调中添加了onMouseoverSegment事件，它将在鼠标悬停时触发警报

现在是真的了。我想在这里用鼠标悬停时的相应值显示工具提示，并删除鼠标悬停时的工具提示。我该怎么做？请帮忙

---

检查

我没有使用您使用的d3pie库，因为d3已经有了一个运行良好的pie布局。这是一个与您的数据工作版本。我一眼就看不出如何扩展那个库。可以在库中的工具提示中使用此示例

  g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return d.data.color; })
  .append('title')
  .text(function(d){return d.data.value})

此代码将标题文本添加到每个svg路径对象中，这些对象是段。如果您想要更多的非浏览器默认工具提示，请查看其中的工具提示部分

---

奇特的工具提示使用事件监听器，将selection.on（）方法与“mouseover”和“mouseout”事件一起使用。这也可以用于突出显示和其他方式，并在上面的书中描述。这非常值得一读，并解释了很多关于d3.js的工作原理

D3Pie库已经内置了工具提示。而且它们也可以定制。您所需要做的就是启用它们，它们应该看起来很好

下面是它的外观（来自d3pie网站）

下面是您应该添加的代码来启用它

"tooltips": {
            "enabled": true,
            "type": "placeholder",
            "string": "{label}: {value} ({percentage}%)",
            "styles": {
                "backgroundColor": "#040404",
                "borderRadius": 5
            }
        }

---

查看api以了解您可以执行的更多自定义操作

刚刚发现这一点，如果您需要更多奇特的工具提示，它可能会很有用。感谢您的回复。你能在里面添加一些动画吗？看我添加了很好的工具提示。动画意味着第一次加载饼图时会有一些转换，比如在我的私有饼图中，第一次加载时是如何加载的（一些延迟加载）