javascript - 圆环图 : how to flip upside down numbers?

Question

我正在尝试找出确定是否将 donut 标签上的文本旋转 180 度所需的逻辑。基本上，如果它们上下颠倒，我想将它们旋转 180 度以提高可读性。理想情况下，这仅适用于颠倒的文本标签，而不适用于已经可读的文本标签。那么问题就变成了如何为 if 逻辑量化这些概念。我相信我的代码中的 r.startAngle 适合这里。这是一个片段。

var margins = {top:20, left:50, bottom:20, right:20};

var width = 300;
                var arcSize = (6 * width / 100);
                var innerRadius = arcSize * 3;

                var data = [
                  {value: 43, marker: 90, label: "Cash", color: '#b8cce4', neg:false},
                  {value: 91, marker: 191, label: "Bonds", color: '#95b3d7', neg:false},
                  {value: 12, marker: 26, label: "Stocks", color: '#4f81b9', neg:false},
                  {value: 7, marker: 15, label: "Securities Funds", color: '#366092', neg:false},
                  {value: 62, marker: 130, label: "Other", color: '#a6a6a6', neg:false}
                ];

var svg = d3.select('body').append('svg').attr('width', width+100).attr('height', width+100);

var graphGroup = svg.append("g")
    .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
/*
    graphGroup.append('image')
        .attr('x',width/2-50)
        .attr('y',width/2-50)
        .attr('width',100)
        .attr('height',100)
        .attr("xlink:href", 'china-life.png');
*/

graphGroup.append('text')
    .attr('x',width/2-41)
    .attr('y',width/2+14)
    .style('font-size','42px')
    .text('5%');

var arcs = data.map(function (obj, i) {
    return d3.svg.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (width / 100) + innerRadius);
});
var arcsGrey = data.map(function (obj, i) {
    return d3.svg.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});

var pieData = data.map(function (obj, i) {
    return [
        {value: obj.value * 0.75, arc: arcs[i], object: obj},
        {value: (100 - obj.value) * 0.75, arc: arcsGrey[i], object: obj},
        {value: 100 * 0.25, arc: arcs[i], object: obj}];
});

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

var g = graphGroup.selectAll('g').data(pieData).enter()
    .append('g')
    .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');
var gText = graphGroup.selectAll('g.textClass').data([{}]).enter()
    .append('g')
    .classed('textClass', true)
    .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');


g.selectAll('path').data(function (d) {
    return pie(d);
}).enter().append('path')
    .attr('id', function (d, i) {
        if (i == 1) {
            return "Text" + d.data.object.label
        }
    })
    .attr('d', function (d) {
        return d.data.arc(d);
    }).attr('fill', function (d, i) {
      if (d.data.object.neg==false) {
        return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none' ;
      } else {
        return i == 0 ? 'red' : i == 1 ? '#D3D3D3' : 'none' ;
      }}).attr('class','segments');

/*
g.selectAll('.segments').attr('fill', function(d,i) {
  return d.data.object.neg==true ? 'red' : 'none';
});
*/

graphGroup.selectAll('g').each(function (d, index) {
    var el = d3.select(this);
    var path = el.selectAll('path').each(function (r, i) {
        if (i === 1) {
            var centroid = r.data.arc.centroid({
                startAngle: r.startAngle + 0.05,
                endAngle: r.startAngle + 0.001 + 0.05
            });
            var lableObj = r.data.object;
            g.append('text')
                .attr('font-size', ((5 * width) / 100))
                .attr('dominant-baseline', 'central')
                /*.attr('transform', "translate(" + centroid[0] + "," + (centroid[1] + 10) + ") rotate(" + (180 / Math.PI * r.startAngle + 7) + ")")
                 .attr('alignment-baseline', 'middle')*/
                .append("textPath")
                .attr("textLength", function (d, i) {
                    return 0;
                })
                .attr("xlink:href", "#Text" + r.data.object.label)
                .attr("startOffset", '5')
                .attr('font-weight','normal')
                .attr("dy", '-3em')
                .text(function(d) {
                  if (lableObj.neg==true) {
                    return '-'+lableObj.marker;
                  } else {
                    return lableObj.marker ;
                  }
                  });
        }
        if (i === 0) {
            var centroidText = r.data.arc.centroid({
                startAngle: r.startAngle,
                endAngle: r.startAngle
            });
            var lableObj = r.data.object;
            /*gText.append('text')
                .attr('font-size', ((5 * width) / 100))
                .text(lableObj.label)
                .attr('transform', "translate(" + (centroidText[0] - ((1.5 * width) / 100)) + "," + (centroidText[1] + ") rotate(" + (180) + ")"))
                .attr('dominant-baseline', 'central');*/
        }
    });
});

<script src="http://d3js.org/d3.v3.min.js"></script>

    if (i === 0 && r.startAngle>180){
        var centroidText = r.data.arc.centroid({
            startAngle: r.startAngle,
            endAngle: r.startAngle)
        } else {
        var centroidText = r.data.arc.centroid({
            startAngle: r.startAngle*Math.pi,
            endAngle: r.startAngle*Math.pi)
        var lableObj = r.data.object; }

不幸的是，在列表控制台错误之后会导致意外的“)”。

在代码片段中，数字:15 和 26 是“颠倒的”，应该翻转过来。

问题

如何翻转圆环图上的文本标签以提高可读性？是否有内置方法或者是改进我的(迄今为止失败的)逻辑的唯一方法？

Answer 1

那些不是常规的文本元素。这些是 <textPath>元素。

因此，旋转它们不是正确的解决方案。您要做的是获取路径的长度...

var thisLength = this.getTotalLength();

...并移动文本，使用 startOffset , 到路径的末尾，像这样:

.attr("startOffset", function(){
    return index === 2 || index === 3 ? thisLength - 22 : 5
})

请注意，这里我只是让第二个和第三个元素(魔数(Magic Number)，就像 22 用于填充)来改变它们的位置:在您的真实代码中，您必须将 a函数查找 startOffset 的元素需要根据基本三 Angular 函数进行更改。

这里是你的代码有那个变化:

var margins = {
  top: 20,
  left: 50,
  bottom: 20,
  right: 20
};

var width = 300;
var arcSize = (6 * width / 100);
var innerRadius = arcSize * 3;

var data = [{
    value: 43,
    marker: 90,
    label: "Cash",
    color: '#b8cce4',
    neg: false
  },
  {
    value: 91,
    marker: 191,
    label: "Bonds",
    color: '#95b3d7',
    neg: false
  },
  {
    value: 12,
    marker: 26,
    label: "Stocks",
    color: '#4f81b9',
    neg: false
  },
  {
    value: 7,
    marker: 15,
    label: "Securities Funds",
    color: '#366092',
    neg: false
  },
  {
    value: 62,
    marker: 130,
    label: "Other",
    color: '#a6a6a6',
    neg: false
  }
];

var svg = d3.select('body').append('svg').attr('width', width + 100).attr('height', width + 100);

var graphGroup = svg.append("g")
  .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
/*
    graphGroup.append('image')
        .attr('x',width/2-50)
        .attr('y',width/2-50)
        .attr('width',100)
        .attr('height',100)
        .attr("xlink:href", 'china-life.png');
*/

graphGroup.append('text')
  .attr('x', width / 2 - 41)
  .attr('y', width / 2 + 14)
  .style('font-size', '42px')
  .text('5%');

var arcs = data.map(function(obj, i) {
  return d3.svg.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (width / 100) + innerRadius);
});
var arcsGrey = data.map(function(obj, i) {
  return d3.svg.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});

var pieData = data.map(function(obj, i) {
  return [{
      value: obj.value * 0.75,
      arc: arcs[i],
      object: obj
    },
    {
      value: (100 - obj.value) * 0.75,
      arc: arcsGrey[i],
      object: obj
    },
    {
      value: 100 * 0.25,
      arc: arcs[i],
      object: obj
    }
  ];
});

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

var g = graphGroup.selectAll('g').data(pieData).enter()
  .append('g')
  .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');
var gText = graphGroup.selectAll('g.textClass').data([{}]).enter()
  .append('g')
  .classed('textClass', true)
  .attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ') rotate(180)');


g.selectAll('path').data(function(d) {
    return pie(d);
  }).enter().append('path')
  .attr('id', function(d, i) {
    if (i == 1) {
      return "Text" + d.data.object.label
    }
  })
  .attr('d', function(d) {
    return d.data.arc(d);
  }).attr('fill', function(d, i) {
    if (d.data.object.neg == false) {
      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
    } else {
      return i == 0 ? 'red' : i == 1 ? '#D3D3D3' : 'none';
    }
  }).attr('class', 'segments');

/*
g.selectAll('.segments').attr('fill', function(d,i) {
  return d.data.object.neg==true ? 'red' : 'none';
});
*/

graphGroup.selectAll('g').each(function(d, index) {
  var el = d3.select(this);
  var path = el.selectAll('path').each(function(r, i) {
    if (i === 1) {
      var centroid = r.data.arc.centroid({
        startAngle: r.startAngle + 0.05,
        endAngle: r.startAngle + 0.001 + 0.05
      });
      var lableObj = r.data.object;
      var thisLength = this.getTotalLength();
      g.append('text')
        .attr('font-size', ((5 * width) / 100))
        .attr('dominant-baseline', 'central')
        /*.attr('transform', "translate(" + centroid[0] + "," + (centroid[1] + 10) + ") rotate(" + (180 / Math.PI * r.startAngle + 7) + ")")
         .attr('alignment-baseline', 'middle')*/
        .append("textPath")
        .attr("textLength", function(d, i) {
          return 0;
        })
        .attr("xlink:href", "#Text" + r.data.object.label)
        .attr("startOffset", function() {
          return index === 2 || index === 3 ? thisLength - 22 : 5
        })
        .attr('font-weight', 'normal')
        .attr("dy", '-3em')
        .text(function(d) {
          if (lableObj.neg == true) {
            return '-' + lableObj.marker;
          } else {
            return lableObj.marker;
          }
        });
    }
    if (i === 0) {
      var centroidText = r.data.arc.centroid({
        startAngle: r.startAngle,
        endAngle: r.startAngle
      });
      var lableObj = r.data.object;
      /*gText.append('text')
          .attr('font-size', ((5 * width) / 100))
          .text(lableObj.label)
          .attr('transform', "translate(" + (centroidText[0] - ((1.5 * width) / 100)) + "," + (centroidText[1] + ") rotate(" + (180) + ")"))
          .attr('dominant-baseline', 'central');*/
    }
  });
});

<script src="http://d3js.org/d3.v3.min.js"></script>