如何更新D3饼图上的文本标签的内容和位置 [英] How to update both the content and location of text labels on a D3 pie chart

问题描述

我试图用 d3.js 创建一个饼形图，如下所示：

I'm trying to make a pie chart with d3.js that looks like this:

img src =https://i.stack.imgur.com/gzVx7.pngalt =enter image description here>

请注意，标签已放置沿着饼图的边缘。最初，我可以绘制饼图，并正确放置文本节点（小提琴只显示一个饼图;然而，假设他们都有数据的工作，是适当的，正如这一个）。但是，当我调整数据时，我似乎不能 .attr（translate，transform）他们到饼图边缘的正确区域对于他们做任何事情）：

Note that the labels are placed along the edges of the pie chart. Initially, I am able to draw the pie charts and properly place the text nodes (the fiddle only displays one pie chart; assume, however, that they all have data that works and is appropriate, as this one does). However, when I go to adjust the data, I can't seem to .attr(translate, transform) them to the correct region along the edge of the pie chart (or do anything to them, for that matter):

changeFunctions[i] = function (data, i) {
    path.data(pie(data))
        .transition()
        .duration(750)
        .attrTween("d", arcTween);

    text.each(function (d, num) {
        d3.select(this)
            .text(function (t) {
                return t.data.name+". "+(100 * t.data.votes/totalVotes).toFixed(0) + "%";
            })
            /*
            .attr("transform", function (d) {
                //console.log("the d", d)
                var c = arc.centroid(d),
                    x = c[0], y = c[1],
                    h = Math.sqrt(x * x + y * y);
                return "translate(" + (x/h * 100) +  ',' + (y/h * 100) +  ")"; 
            })*/
            .attr("opacity", function (t) {
                return t.data.votes == 0 ? 0 : 1;
            });
    })
}

我省略了一般代码绘制饼图;它在jsfiddle。基本上，我在中为循环绘制每个饼图，并存储此函数 changeFunctions [i] 一个闭包，以便我可以访问变量 path 和 text 。

I have omitted the general code to draw the pie chart; it's in the jsfiddle. Basically, I draw each of the pie charts in a for loop and store this function, changeFunctions[i], in a closure, so that I have access to variables like path and text.

此函数的 path.data 部分起作用;饼图正确地调整其楔形。 text.each 部分，但是不是。

The path.data part of this function works; the pie chart properly adjusts its wedges. The text.each part, however, does not.

如何使文本节点更新它们的值和位置？

How should I go about making the text nodes update both their values and locations?

推荐答案

更新文本元素时，更新绑定到他们的数据，否则什么都不会发生。当创建元素时，您将数据绑定到包含圆弧段和文本的 g 元素。然后，添加 path 和 text ，数据将继承到这些元素。您在设置这些元素的属性时引用 d 来利用此事实。

When updating the text elements, you also need to update the data that's bound to them, else nothing will happen. When you create the elements, you're binding the data to the g element that contains the arc segment and text. By then appending path and text, the data is "inherited" to those elements. You're exploiting this fact by referencing d when setting attributes for those elements.

可能是最好的方法它的工作是使用相同的模式更新。也就是说，不是像以前一样只更新绑定到路径元素的数据，而是更新 g 元素。然后您可以 .select（）后代 path 和 text 元素，这将再次继承新数据给它们。然后您可以以通常的方式设置属性。

Probably the best way to make it work is to use the same pattern on update. That is, instead of updating only the data bound to the path elements as you're doing at the moment, update the data for the g elements. Then you can .select() the descendant path and text elements, which will again inherit the new data to them. Then you can set the attributes in the usual manner.

这需要对代码进行一些更改。特别是，对于 g 元素选择应该有一个变量，而不仅仅是路径 ：

This requires a few changes to your code. In particular, there should be a variable for the g element selection and not just for the paths to make things easier:

var g = svg.selectAll("g.arc")
        .data(pie(data));
g.enter()
        .append("g").attr("class", "arc");
var path = g.append("path");

changeFunction 代码更改如下： / p>

The changeFunction code changes as follows:

var gnew = g.data(pie(data));
gnew.select("path")
            .transition()
            .duration(750)
            .attrTween("d", arcTween);

现在，要更新文本只需要选择它并重置属性：

Now, to update the text, you just need to select it and reset the attributes:

gnew.select("text")
    .attr("transform", function(d) { ... });

完成演示此处。

这篇关于如何更新D3饼图上的文本标签的内容和位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！