如何在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 多年前發布的，可能已經修復了！