2017-12-26 3 views
2

돌아 가기 value0 일 때 label을 파이 차트의 에서 숨기려고합니다. 누구든지 NVD3.js에서 올바른 방향으로 나를 가리킬 수 있습니까?NVD3.js의 값이 0 인 경우 범례 항목 숨기기 원형 차트

nv.addGraph(function() { 
    var donutChart = nv.models.pieChart() 
     .x(function (d) { 
      return d.label 
     }) 
     .y(function (d) { 
      return d.value 
     }) 

     d3.select("#chart-devices svg") 
     .datum(data) 
     .transition().duration(1200) 
     .call(donutChart); 

    nv.utils.windowResize(donutChart.update); 
    return donutChart; 
}); 
+0

당신이 할 수있는 최선의 가치와 예비 데이터 항목을 제거하는 것입니다 생각 = 0 – beaver

+0

그러나 여기에 항목을 제거하는 바이올린은 (함께 "제로" 가치) 전설에서 : https://jsfiddle.net/beaver71/yt7vrohk/ – beaver

+0

대단히 감사합니다. 'undefined'에 '속성을 읽을 수 없습니다'라는 오류가 나타납니다. 또한 클래스를 추가하여 범례 항목을 '0'으로 숨길 지 궁금합니다. 게시 된 솔루션은 몇 가지 항목과 함께 훌륭하게 작동하지만 아직 많은 경우 명확한 차이가 있습니다. – Darren

답변

1

가능한 대답 renderEnd 이벤트 = 값 0 항목을 제거하는 것이다 :이 두 경우

setTimeout(function() { 
    d3.selectAll(".nv-legend .nv-series")[0].forEach(function (d) { 
     //get the data 
     var t = d3.select(d).data()[0]; 
     // remove item from legend 
     if (t.value == 0) 
      d3.select(d).remove(); 
    }); 
}, 1); 

:

chart.dispatch.on('renderEnd', function() { 
    console.log("renderEnd"); 
    d3.selectAll(".nv-legend .nv-series")[0].forEach(function (d) { 
     //get the data 
     var t = d3.select(d).data()[0]; 
     // remove item from legend 
     if (t.value == 0) 
      d3.select(d).remove(); 
    }); 
}); 

다른 가능성은 타임 아웃 후 항목을 제거하는 것 남은 항목들 사이에 틈이있다. 여기

는 바이올린 (첫 번째 옵션)입니다 : https://jsfiddle.net/beaver71/yt7vrohk/

관련 문제