javascript - 在 D3.js 饼图上显示标签

Question

我尝试使用以下代码在简单的 D3.js 饼图上显示标签:

HTML:

<div id="chart"></div>

JS:

(function(d3) {

    var last_login_today = <?php echo json_encode($last_login_today_count); ?>;
    var last_login_before_today = <?php echo json_encode($did_not_login_today_count); ?>;       

    'use strict';

    var dataset = [
      { label: 'Logged in Today', count: last_login_today }, 
      { label: 'Logged in Before Today', count: last_login_before_today }
    ];

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

    var color = d3.scale.category20b();

    var svg = d3.select('#chart')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + 
        ',' + (height / 2) + ')');

    var arc = d3.svg.arc()
      .outerRadius(radius);

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

    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) { 
        return color(d.data.label);
      });

  })(window.d3);

图表本身已正确填充，但未显示“今天登录”和“今天之前登录”标签。

Answer 1

我将从这个开始，由于未知的字符串长度，动态地制作馅饼上的标签是一件痛苦的事情。

我用它来找到 Angular 点，这样我就可以把它左/右

            function midAngle(d) {
                return d.startAngle + ((d.endAngle - d.startAngle) / 2);
            }

你需要这个

                var labels = svg.append("g")
                                .attr("class", "labels")
                                .selectAll("text")
                                    .data(pie(dataset))
                                    .enter()
                                    .append("text")
                                        .attr("transform", function (d) {
                                            this._current = this._current || d;
                                            var interpolate = d3.interpolate(this._current, d);
                                            var d2 = interpolate(0);
                                            var pos = arc.centroid(d2);
                                            pos[0] = radius * (midAngle(d2) < Math.PI ? 1.2 : -1.2));
                                            return "translate(" + pos + ")";
                                        })
                                        .attr("dy", ".35em")
                                        .style("text-anchor", "end")
                                        .text(function (d) {
                                            return d.data.Label;
                                        });