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

Question

I am using d3.js to render my pie chart but for small values, it's not displaying the corresponding arc in the pie chart my input values are like this

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

here input key three the value is 11, this arc is not appearing in my chart can anyone help how to display the small value arcs in the pie chart.

Answer 1

After couple hours debug the d3.js internal code, I came to know that we can display the arcs for smaller values.I achieve this functionality by changing the internal code in the d3.js file. actually, for smaller values, the arc is not displayed because of for small input values the start angle and end angles are less that's why it is not shown the chart. then I figure out where internally d3.js assigning that start angle and end angle. I increased the end angle of small input values now my chart displayed arc for smaller input values in the chart. this is the code where I internally change the code in 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
        };
}
      });

In the above just i added only

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

I write the if-else block to check the value is less than 1000 then I increased the end angle by 0.208246141, then my arc is shown perfectly in the chart.

Answer 2

"Lying with data" above is an overstatement. It's not uncommon to set a minimum to make small values visible - check out the default settings for RawGraphs. In this case, I'd use .padAngle() and the apply a stroke to the arc path to thicken.

Also I realize this was posted 2+yrs ago and has probably already fixed!