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

Question

我正在使用 D3.js构建饼图。我正在关注 this在 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 路径对象。如果你想要更多花哨的非浏览器默认工具提示，请查看 this book on d3其中有一个关于工具提示的部分。

精美的工具提示使用事件监听器，使用带有“鼠标悬停”和“鼠标移出”事件的 selection.on() 方法。这也可以用于突出显示和其他方式，并在上面的书中进行了描述。非常值得一读，并解释了很多关于 d3.js 的工作原理。