D3饼图标签和内部值 | D3饼图标签和内部值

本文介绍了D3饼图标签和内部值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要一些帮助，以便将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类(并因此出现)，并出现在和y位置.

Creating a <div> element in the main <body> of your page, with an id of "tooltip" and a class of "hidden".
In your <style> section, style your tooltip (accessing it via #tooltip) however you want it to appear, and style your .hidden class as display:none.
Create a function which, when a user mouses over a section of your donut chart (or clicks on it, or whatever), the tooltip loses its .hidden class (and thus appears), and appears at the x and y location 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饼图标签和内部值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！