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
}];

这里输入键3的值是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年前发布的，可能已经解决了！

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

2 个答案: