아크 차트 - 다양한 세그먼트 들여 쓰기/높이

Question

최신 ARC 도표 1과 - http://jsfiddle.net/NYEaX/699/ ***

나는 아크 차트의 세트를 개발하고 있어요.

http://jsfiddle.net/NYEaX/90/

는 ^이 내가 가지고있는 최신 버전입니다.

내 첫 번째 문제 - 새로운 데이터 집합이 들어 오면 애니메이션이 깜박 거리는 것입니다.

또한 세그먼트 당 내경/외경을 변경하는 데 관심이 있습니다.

난 그냥 다음 코드 나 응용 프로그램을 수정 한

getArc: function(){ 
      var that = this; 

      var arc = d3.svg.arc() 
        .innerRadius(function(d, i){ 
         return that.radius; 
        }) 
        .outerRadius(function(d){ 
         var maxHeight = 100; 
         var ratio = (d.height/maxHeight * 100)+that.radius; 
         return ratio; 
        }) 
        .startAngle(function(d, i){ 
         return d.startAngle; 
        }) 
        .endAngle(function(d, i){ 
         return d.endAngle; 
        }); 

      return arc; 
     } 

---

의 i에서 계수를 제공한다.

이제 다양한 세그먼트에서 교대조를 만들었습니다.

http://jsfiddle.net/NYEaX/91/

그러나, 지금은 자신의 길이를 변경하는 세그먼트의 값을 사용하려합니다. 그래서 저는 그림 예제와 같은 호를 만들고 싶습니다.

이것은 내가 가진 최신 사례입니다. 여기

http://jsfiddle.net/NYEaX/92/

및

는 코드입니다 - 나는 해결책을 완료 startAngle로부터/endAngle를 통해 정확한 길이를 제공하기 위해 호 모두의 전체 길이를 얻는 방법을 확실입니다.

setData: function(data, isSorted){ 

      var diameter = 2 * Math.PI * this.radius; 

      var localData = new Array(); 

      var displacement = 0; 
      var oldBatchLength = 0; 


      var totalSum = 0; 
      $.each(data, function(index, value) { 
       $.each(value.segments, function(ri, va) { 
        totalSum+= va.height; 
       }); 
      }); 


      $.each(data, function(index, value) {    
       var riseLevels = value.segments; 
       //var riseLevelCount = riseLevels.length; 

       //var arcBatchLength = 2*Math.PI; 
       //var arcPartition = arcBatchLength/riseLevelCount; 

        $.each(riseLevels, function(ri, value) { 

         if(oldBatchLength !=undefined){    
          displacement+=oldBatchLength; 
         } 

         var segmentValue = value.height; 

         //var ratio = value.height/totalSum; 

         var arcBatchLength = segmentValue;//ratio*2*Math.PI; 
         var arcPartition = arcBatchLength/totalSum;      


         var startAngle = (ri*arcPartition); 
         var endAngle = ((ri+1)*arcPartition); 

         if(index!=0){ 
          startAngle+=displacement; 
          endAngle+=displacement; 
         } 

         riseLevels[ri]["startAngle"] = startAngle; 
         riseLevels[ri]["endAngle"] = endAngle; 
         riseLevels[ri]["index"] = ri; 



         oldBatchLength = arcBatchLength; 
        }); 
         //oldBatchLength = arcBatchLength;  

       localData.push(riseLevels); 
      }); 

      var finalArray = new Array(); 

      $.each(localData, function(index, value) { 
       $.each(localData[index], function(i, v) { 
        finalArray.push(v); 
       }); 
      }); 

      console.log("finalArray", finalArray); 

      return finalArray; 

     } 

Answer 1

나는 그 값과 관련하여 호 길이를 수정하는 것에 더 가깝다. 그러나 호의 변위가 올바르지 않습니다. 더 많은 데이터가 회색 호에 노출되면

http://jsfiddle.net/NYEaX/100/

-이 나옵니다. 녹색/노란색/녹색 호로 전환하면 비슷합니다.

나는 문제를 식별하고 시도하기 위해 응용 프로그램을 더욱 단순화하려고 노력했습니다.

$.each(data[0].segments, function(ri, value) { 
       //console.log("ri", ri); 

       if(oldBatchLength !=undefined){    
        displacement+=oldBatchLength; 
       } 

       var segmentValue = value.value; 

       var fraction = segmentValue/segmentValueSum; 

       var arcBatchLength = fraction*2*Math.PI; 
       var arcPartition = arcBatchLength;  

       //console.log("arcBatchLength", arcBatchLength); 
       //console.log("oldBatchLength", oldBatchLength); 
       //console.log("displacement", displacement); 

       var startAngle = (ri*arcPartition); 
       var endAngle = ((ri+1)*arcPartition); 

       if(ri!=0){ 
        displacement-=arcBatchLength;//not sure its right 

        startAngle+=displacement; 
        endAngle+=displacement; 
       } 

       data[0].segments[ri]["startAngle"] = startAngle; 
       data[0].segments[ri]["endAngle"] = endAngle; 
       data[0].segments[ri]["index"] = ri; 

       oldBatchLength = arcBatchLength; 
      });