在D3饼图中添加工具提示的问题

Question

我正在使用D3.js构建饼图。 我正在按照本教程在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>

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

现在是真实的东西。 我想在此处显示带有鼠标悬停时相应值的工具提示，并在鼠标悬停时删除该工具提示。 我怎样才能做到这一点 ？ 请帮忙。

检查JSFIDDLE

Answer 1

我没有使用过您使用的d3pie库，因为d3已经具有一个饼状布局，可以很好地工作。 这是一个包含数据的工作版本的JSfiddle 。 我一眼看不到如何扩展该库。 可以在工具提示中的库中使用此示例。

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

此代码将标题文本添加到每个svg路径对象（即段）。 如果您想了解更多非浏览器默认的工具提示，请参阅d3上的这本书，其中有关于工具提示的部分。

花哨的工具提示将事件侦听器与select.on（）方法一起用于“ mouseover”和“ mouseout”事件。 这也可以用于突出显示和其他方式，并在上本书中进行了描述。 值得一读并解释了d3.js的工作原理。

Answer 2

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

外观如下（来自d3pie网站）

这是您应该添加以启用它的代码

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

请参阅此处的api ，以了解更多可定制的信息