D3饼图标签和内部值 [英] D3 pie chart labels and value inside
问题描述
我需要一些帮助，以便将VALUE包含在饼图中.
I need some help to include VALUE inside the pie chart.
var data=[11975, 5871, 8916, 2868,4999,5994,6810,7619,1871];
标签名称以不同的颜色表示，如下图所示. 具有颜色表示的标签名称.
Label name in different color representation like below image. label name with color representation.
var data=[DOWRY,KIDNAPPING,INSULT,ASSAULT,CRUELTY,IMPORTATION,IMMORAL,PROHIBITION,INDECENT]
如何制作标题，例如，饼图为2001，饼图为2002，饼图为2003，饼图为2004.
How can I make a header, say 2001 for a pie chart, 2002 for a pie chart, 2003 for a pie chart,2004 for a pie chart.
推荐答案
听起来您希望工具提示出现在甜甜圈图的中间.您可以通过以下方式做到这一点:
It sounds like you want a tooltip to appear in the middle of your donut chart. You can do this by:
- 在页面的主
<body>中创建一个<div>元素，其id表示工具提示"，而class表示隐藏". - 在
<style>部分中，设置工具提示的样式(通过#tooltip访问)，但不希望其显示，并将.hidden类的样式设置为display:none. - 创建一个
function，当用户将鼠标悬停在您的甜甜圈图的某个部分上(或单击它或其他内容)时，工具提示会丢失其.hidden类(并因此出现)，并出现在<甜甜圈环之间的c10>和y位置.
- Creating a
<div>element in the main<body>of your page, with anidof "tooltip" and aclassof "hidden". - In your
<style>section, style your tooltip (accessing it via#tooltip) however you want it to appear, and style your.hiddenclass asdisplay:none. - Create a
functionwhich, when a user mouses over a section of your donut chart (or clicks on it, or whatever), the tooltip loses its.hiddenclass (and thus appears), and appears at thexandylocation between your donut rings.
一些示例代码. <div>元素:
Some sample code. The <div> element:
<div id="tooltip" class="hidden" style="left: 600px, top: 400px">
<p><span id="genre">hip hop</span></p>
</div>
CSS样式:
#tooltip {
position: absolute;
width: 90px;
height: auto;
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
显示"工具提示的function:
function mouseover(d) {
d3.select("#tooltip")
.style("left", "270px") //this is the x location, between the donut
.style("top", "537px"); //y location, between the donut
d3.select("#genre")
.html('<strong>' + d.name + '</strong>'); //this calls the data
d3.select("#tooltip").classed("hidden", false); //this unhides the tooltip
};
最后，每当用户将鼠标悬停在甜甜圈图的一部分上时(使用您的代码作为示例的基础)，就调用该函数:
And, finally, calling the function whenever a user hovers over a section of the donut chart (using your code as the base of the example):
svg.selectAll("path")
.data(d3.layout.pie())
.enter().append("svg:path")
.attr("d", d3.svg.arc()
.innerRadius(r / 2)
.outerRadius(r))
.style("fill", function(d, i) { return z(i); })
.on("mouseover", mouseover); //calling the function which reveals tooltip
您还需要创建mouseout函数，以在用户的鼠标离开甜甜圈部分时再次隐藏工具提示.
You'll also need to make a mouseout function to hide the tooltip again when a user's mouse leaves the donut section.
希望有帮助.祝你好运.
Hope that helps. Good luck.
这篇关于D3饼图标签和内部值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
