我正在尝试弄清楚如何排列标签以使它们不重叠。这是图表的图片

如您所见，对于非常小的值，文本标签重叠。我试图遍历每个文本元素并修改它的位置，但这似乎不起作用。你可以在这个函数的底部看到我试图获取每个文本元素的位置然后修改它。我究竟做错了什么？我已经研究了几个小时。

   _renderDonutChart() {
    let self = this;
    // console.log("Donut Chart is beginning render")
    let textOffset = 14;
    self.graph.data[0].forEach(function (d) {
        d.value = +d.value;
    })
    console.log(self.graph.data[0])
    let boxSize = (self.options.radius + self.options.padding) * 2;
    let parent = d3.select(self.ui.parent);
    //let color = d3.scaleOrdinal(['#dc8710', '#9e3400', '#f19b12']);
    let color = d3.scaleOrdinal(d3.schemeCategory20c);
    let svg = parent.append('svg')
        .attr('width', boxSize * 2)
        .attr('height', boxSize)
        .attr('transform', 'translate(-111,0)')
        .append('g')
        .attr('transform', 'translate(' + boxSize + ',' + boxSize / 2 + ')');
    svg.append('g')
        .attr('class', 'slices')
    svg.append("g")
        .attr("class", "labelName")
    svg.append("g")
        .attr("class", "labelValue")
    svg.append("g")
        .attr("class", "lines")
    svg.append("div")
        .attr("class", "progress-circle__box progress-circle__box--victorytype")
    let arc = d3.arc()
        .innerRadius(self.options.radius - self.options.border)
        .outerRadius(self.options.radius);
    let outerArc = d3.arc()
        .innerRadius((self.options.radius - self.options.border) * 1.2)
        .outerRadius((self.options.radius) * 1.2);
    let legendRectSize = self.options.radius * 0.05;
    let legendSpacing  = self.options.radius * 0.02;
    let pie = d3.pie()
        .value(function(d) { return d.value; })
        .sort(null);
    let slice = svg.select('.slices')
        .selectAll('path.slice')
        .data(pie(self.graph.data[0]))
        .enter()
        .append('path')
        .attr("class", "slice")
        .attr('d', arc)
        .attr('fill', function(d, i) {
            return color(d.data.label);
        })
        .transition().duration(1000)
        .attrTween("d", function(d) {
            this._current = this._current || 0;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                return arc(interpolate(t));
            };
        })

    function midAngle(d){
        return d.startAngle + (d.endAngle - d.startAngle)/2;
    }
    let text = svg.select(".labelName").selectAll("text")
        .data(pie(self.graph.data[0]))
        .enter()
        .append("text")
        .attr('class', 'label')
        .attr("dy", ".35em")
        .attr('transform', function(d) {

            // effectively computes the centre of the slice.
            // see https://github.com/d3/d3-shape/blob/master/README.md#arc_centroid
            var pos = outerArc.centroid(d);

            // changes the point to be on left or right depending on where label is.
            pos[0] = self.options.radius * 0.97 * (midAngle(d) < Math.PI ? 1 : -1);
            return 'translate(' + pos + ')';
        })
        .style('text-anchor', function(d) {
            // if slice centre is on the left, anchor text to start, otherwise anchor to end
            return (midAngle(d)) < Math.PI ? 'start' : 'end';
        })
        .style("fill", "white")
        .text(function(d) {
            return (" " + d.data.label+": " +d.value+"");
        })
        .transition().duration(1000)
        .attrTween("transform", function(d) {
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = self.options.radius * (midAngle(d2) < Math.PI ? 1 : -1);
                return "translate("+ pos +")";
            };
        })
        .styleTween("text-anchor", function(d){
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                return midAngle(d2) < Math.PI ? "start":"end";
            };
        })
        .text(function(d) {
            return (d.data.label+": "+d.value+"%");
        })
    let polyline = svg.select(".lines").selectAll("polyline")
        .data(pie(self.graph.data[0]))
        .enter()
        .append("polyline")
        .attr('points', function(d) {
            var pos = outerArc.centroid(d);
            pos[0] = self.options.radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
            return [arc.centroid(d), outerArc.centroid(d), pos]
        })
        .style("fill", "none")
        .style("stroke", "white")
        .style("stroke-width", "1px");

    let prev;
    text.each(function(d, i) {
        if(i > 0) {
            let thisbb = this.getBoundingClientRect(),
                prevbb = prev.getBoundingClientRect();
            // move if they overlap
            console.log(thisbb.left);
            console.log(prevbb.right);
            if(!(thisbb.right < prevbb.left ||
                thisbb.left > prevbb.right ||
                thisbb.bottom < prevbb.top ||
                thisbb.top > prevbb.bottom)) {
                var ctx = thisbb.left + (thisbb.right - thisbb.left)/2,
                    cty = thisbb.top + (thisbb.bottom - thisbb.top)/2,
                    cpx = prevbb.left + (prevbb.right - prevbb.left)/2,
                    cpy = prevbb.top + (prevbb.bottom - prevbb.top)/2,
                    off = Math.sqrt(Math.pow(ctx - cpx, 2) + Math.pow(cty - cpy, 2))/2;
                d3.select(this).attr("transform",
                    "translate(" + Math.cos(((d.startAngle + d.endAngle - Math.PI) / 2)) *
                    (self.options.radius + textOffset + off) + "," +
                    Math.sin((d.startAngle + d.endAngle - Math.PI) / 2) *
                    (self.options.radius + textOffset + off) + ")");
            }
        }
        prev = this;
    });

    // console.log("Donut Chart is ending render")
}

最佳答案

我遇到了同样的问题。对我来说最好的解决方案是增加 Svg 区域的大小(基于当前窗口)并根据 donut 的半径向图例添加一些填充。

即:

   var margin = {top: 20, right: 100, bottom: 30, left: 40};
   var svgWidth = window.innerWidth - (window.innerWidth/4);
   var width = svgWidth,
      height = (Math.min(width) / 2) + 100,
      radius = Math.min(width, height) / 3;

   var legendRectSize = (radius * 0.08);
   var legendSpacing = (radius * 0.05);

这对我有用，直到项目数变得太高。我修改了边缘周围的标签以在切片/弧形悬停事件中显示在中心。 (数据值上有一个动画，这就是为什么他们在这个快照中是倾斜的)

我认为这可以让难以阅读的数据标签变得不那么困惑。

关于javascript - d3 v4 圆环图具有与小值重叠的文本和折线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47401768/