Question

我需要一些帮助才能在饼图中包含VALUE。

var data=[11975,  5871, 8916, 2868,4999,5994,6810,7619,1871];

不同颜色表示的标签名称，如下图所示。带有颜色表示的标签名称。

var data=[DOWRY,KIDNAPPING,INSULT,ASSAULT,CRUELTY,IMPORTATION,IMMORAL,PROHIBITION,INDECENT]

Images

如何制作标题，例如2001年的饼图，2002年的饼图，2003年的饼图，2004年的饼图。

Answer 1

听起来你想要一个工具提示出现在你的圆环图中间。您可以通过以下方式执行此操作：

在您网页的主<div>中创建<body>元素，其中id为“工具提示”，class为“隐藏”。
在您的<style>部分中，设置工具提示的样式（通过#tooltip访问它）但您希望它显示，并将.hidden类设置为display:none。
创建一个function，当用户将鼠标悬停在圆环图的一部分上（或点击它或其他任何部分）时，工具提示会丢失其.hidden类（并因此显示），并且显示在您的甜甜圈戒指之间的x和y位置。

一些示例代码。 <div>元素：

   <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;
}

“{1}}”揭示“工具提示：

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

};

当用户的鼠标离开圆环部分时，您还需要制作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功能以再次隐藏工具提示。

希望有所帮助。祝你好运。

D3饼图标签和里面的价值

1 个答案: