Question

我编写了一个使用d3.js生成饼图的javascript程序。

这样可以正常工作，但是我无法在图表中添加标签。

我使用的数据具有以下结构：

    [["country", "percentage"], ["country", "percentage"],...]

或作为例子：

     [["A", "0.5"], ["AUS", "0.3"],....]

图表工作正常，但我没有要显示的标签。

任何帮助都将不胜感激。

这里是代码的摘录：

    var updatePie = function () {

                var width = 480,
                    height = 480,
                    radius = Math.min(width, height) / 2;



                var labelr = radius + 30;
                var formatPercent = d3.format(",.2%");
                var color = d3.scale.ordinal()
                .domain(["A", "AUS", "B", 
                         "BG", "BR", "CDN", 
                         "CH", "CN", "CO", 
                         "CZ", "D", "DK", "E", 
                         "EST", "ET", "F", 
                         "FIN", "GB", "I", 
                         "IL", "IRL", "J", 
                         "N", "NL", "NZ", 
                         "RUS", "S", "UAE", 
                         "USA", "ZA"])
                .range(["#bac5ca", "#7b95a7", "#526f8b",
                        "#454c57", "#323540", "#a17d48",
                        "#5e747d", "#405666", "#2a2e34",
                        "#1f2127", "#5c482b", "#c7d0d4",
                        "#94a9b8", "#6f8aa3", "#616c7c",
                        "#505669", "#b49569", "#8a9ca3",
                        "#57768b", "#41576d", "#363c45",
                        "#292b33", "#7e623a", "#d5dbdf",
                        "#adbdca", "#90a6ba", "#848e9c",
                        "#747b90", "#454c57", "#c6af8c",
                       ]), svg;
                function graph(_selection) {
                    _selection.each(function(_data) {   

                        var pie = d3.layout.pie()
                        .value(function(d) { return d[1]; })
                        .sort(null);

                        var arc = d3.svg.arc()
                        .innerRadius(radius - 100)
                        .outerRadius(radius - 50);

                        if (!svg){
                            svg = d3.select(this).append("svg")
                                .attr("width", width)
                                .attr("height", height)
                                .append("g")
                                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                        }
                        var path = svg.selectAll("path").data(pie(_data));

                        path.enter().append("path")
                            .attr("fill", function(d, i) { return color(i); })
                            .attr("d", arc)
                            .each(function(d) {this._current = d;} );


                        var text  = svg.selectAll("text")
                                            .data(pie(_data));

                        text.append('text')
                            .attr("fill", "black")
                            .attr("font-family", "sans-serif")
                            .attr("transform", function(d) {
                            var c = arc.centroid(d),
                                x = c[0],
                                y = c[1],
                                h = Math.sqrt(x*x + y*y);
                            return "translate(" + (x/h * labelr) +  ',' +
                                (y/h * labelr) +  ")"; 
                        })
                            .attr("text-anchor", function(d) {
                            // are we past the center?
                            return (d.endAngle + d.startAngle)/2 > Math.PI ?
                                "end" : "start";
                        })
                            .text(function (d) {
                            return d[0]+ " " + formatPercent(d[1]);
                            });



                path.transition()
                    .attrTween("d", arcTween)
                    .duration(750);

                path.exit().remove()



                function arcTween(a) {
                    var i = d3.interpolate(this._current, a);
                    this._current = i(0);
                    return function(t) {
                        return arc(i(t));
                    };
                }

            });

            }
            return graph;
            }

            var updateFunction = updatePie();
            var container = d3.select("#chartDiv");

            function update(data) {
                container.datum(data).call(updateFunction);
            }

            var firstDataset = getChannelData("channelName1");

            update(firstDataset);

            document.getElementById("dropdown").addEventListener("click", reDrawChart);

            function reDrawChart() {
                var e = document.getElementById("dropdown");
                var strUser = e.options[e.selectedIndex].innerHTML;
                getChannelData("channelName2");
                var secondDataset = getChannelData(strUser);
                update(secondDataset);
            }

Answer 1

由于没有小提琴我没有运行代码，但在添加标签时使用输入和退出选择可能会有所帮助（这也可以防止更新时出现重复标签）。

为此，请更改添加标签的位：

text
  .enter()
  .append('text')
  //the rest of your test attributes

text
  .exit()
  .remove();

现在这不会立即解决您的问题，但下一步将记录输入选择。如果输入选择为空，则可能是您绑定到文本的数据有问题（pie(_data)返回的问题）。

如果输入选择正确，并且您要添加到DOM的标签，则必须采用添加标签的方式。这看起来很好但是我认为这是你绑定的数据的问题。

如果您可以添加pie(_data)的控制台日志并且标签输入选择，我们将很乐意为您提供帮助。（或者提供一个小问题）。

希望这有帮助。

在使用没有命名条目的数组时，如何向饼图添加标签

1 个答案: