如何在d3.js饼图中显示小值弧？

Question

我正在使用 d3.js 来呈现我的饼图，但对于小值，它没有在饼图中显示相应的弧，我的输入值是这样的

$scope.exampleData = [{
    key: "zero",
    y: 11121
}, {
    key: "one",
    y: 2780
}, {
    key: "two",
    y: 2780
}, {
    key: "three",
    y: 11
}, {
    key: "four",
    y: 15689
}, {
    key: "five",
    y: 1111
}];

这里输入键三的值是 11，这个弧没有出现在我的图表中，任何人都可以帮助如何在饼图中显示小值弧。

Answer 1

经过几个小时调试 d3.js 内部代码后，我开始知道我们可以显示较小值的弧线。我通过更改 d3.js 文件中的内部代码来实现此功能。 实际上，对于较小的值，圆弧不会显示，因为对于较小的输入值，起始角度和结束角度较小，这就是图表未显示的原因。 然后我找出内部 d3.js 分配起始角度和结束角度的位置。 我增加了小输入值的结束角度，现在我的图表显示了图表中较小输入值的弧线。 这是我在内部更改 d3.js 中的代码的代码

d3.layout.pie = function() {
    var value = Number, sort = d3_layout_pieSortByValue, startAngle = 0, endAngle = τ;
    function pie(data) {
      var values = data.map(function(d, i) {
        return +value.call(pie, d, i);
      });
      var a = +(typeof startAngle === "function" ? startAngle.apply(this, arguments) : startAngle);
      var k = ((typeof endAngle === "function" ? endAngle.apply(this, arguments) : endAngle) - a) / d3.sum(values);
      var index = d3.range(data.length);
      if (sort != null) index.sort(sort === d3_layout_pieSortByValue ? function(i, j) {
        return values[j] - values[i];
      } : function(i, j) {
        return sort(data[i], data[j]);
      });
      var arcs = [];
      index.forEach(function(i) {
        var d;
if(1000>values[i])
{
arcs[i] = {
          data: data[i],
          value: d = values[i],
          startAngle: a,
          endAngle: a += 0.208246141
        }
}else{
        arcs[i] = {
          data: data[i],
          value: d = values[i],
          startAngle: a,
          endAngle: a += d * k
        };
}
      });

在上面我只添加了

if(1000>values[i])
{
arcs[i] = {
          data: data[i],
          value: d = values[i],
          startAngle: a,
          endAngle: a += 0.208246141
        }
}else{
        arcs[i] = {
          data: data[i],
          value: d = values[i],
          startAngle: a,
          endAngle: a += d * k
        };
}

我写了 if-else 块来检查值是否小于 1000 然后我将结束角度增加了 0.208246141，然后我的弧线在图表中完美显示。

Answer 2

上面的“用数据说谎”是夸大其词。 设置最小值以使小值可见的情况并不少见 - 查看 RawGraphs 的默认设置。 在这种情况下，我会使用.padAngle()并将笔触应用到圆弧路径以加厚。

我也意识到这是 2 多年前发布的，可能已经修复了！