d3js를 사용하여 반원형 도넛 형 차트에서 오른쪽에서 왼쪽으로 진행 경로를 그립니다.

완료 비율을 보여주는 반원형 도넛 형 차트를 만들고 싶습니다. 그러나 왼쪽에서 오른쪽으로가 아니라 오른쪽에서 왼쪽으로 백분율 매핑을 그립니다. 경로 후 다시 다른 SVG 그리기 : 경로를 왼쪽에서 오른쪽으로 완료의 비율을 나타내는 다음은 우리가 SVG를 사용하여 세미 원 도넛 차트를 그리는 위의 코드에서 내 코드,d3js를 사용하여 반원형 도넛 형 차트에서 오른쪽에서 왼쪽으로 진행 경로를 그립니다.

var percent = 30;   


    var ratio=percent/100; 

    var pie=d3.layout.pie() 
      .value(function(d){return d}) 
      .sort(null); 

    var w=300,h=300; 

    var outerRadius=(w/2)-10; 
    var innerRadius=85; 


    var color = ['#ececec','#f06b3e','#888888']; 

    var colorOld='#F00'; 
    var colorNew='#0F0'; 

    var arc=d3.svg.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0) 
      .endAngle(Math.PI); 


    var arcLine=d3.svg.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0); 

    var svg=d3.select("#chart") 
      .append("svg") 
      .attr({ 
       width:w, 
       height:h, 
       class:'shadow' 
      }).append('g') 
      .attr({ 
       transform:'translate('+w/2+','+h/2+')' 
      }); 



    var path=svg.append('path') 
      .attr({ 
       d:arc, 
       transform:'rotate(-90)' 
      }).attr({ 
       'stroke-width':"1", 
       stroke:"#666666" 
      }) 
      .style({ 
       fill:color[0] 
      }); 


    var pathForeground=svg.append('path') 
      .datum({endAngle:0}) 
      .attr({ 
       d:arcLine, 
       transform:'rotate(-90)' 
      }) 
      .style({ 
       fill: function (d,i) { 
        return color[1]; 
       } 
      }); 


    var middleCount=svg.append('text') 
      .datum(0) 
      .text(function(d){ 
       return d; 
      }) 
      .attr({ 
       class:'middleText', 
       'text-anchor':'middle', 
       dy:0, 
       dx:5 
      }) 
      .style({ 
       fill:d3.rgb('#000000'), 
       'font-size':'60px' 



      }); 

    var oldValue=0; 
    var arcTween=function(transition, newValue,oldValue) { 
     transition.attrTween("d", function (d) { 
      var interpolate = d3.interpolate(d.endAngle, ((Math.PI))*(newValue/100)); 

      var interpolateCount = d3.interpolate(oldValue, newValue); 

      return function (t) { 
       d.endAngle = interpolate(t); 
       middleCount.text(Math.floor(interpolateCount(t))+'%'); 
       arcLine=d3.svg.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(function(){ 
       return (newValue * (Math.PI/180)); 
      }); 
      return arcLine(d); 
      }; 
     }); 
    }; 


pathForeground.transition() 
     .duration(0) 
     .ease('cubic') 
     .call(arcTween,percent,oldValue);

입니다.

d3js를 사용하여 백분율 표시기를 왼쪽에서 오른쪽으로 표시하지 않고 어떻게 오른쪽에서 왼쪽으로 그릴 수 있습니까?

출처

2017-10-10 Johncy Binoy

당신을 위치 :

여기

일부 실행 코드입니다 : 기본적으로, 당신은 Math.PI/2에서 시작 애니메이션 및 수학은 다음과 같습니다 0으로 뒤로 가고 싶어 이것이 지금 당신이 원하는 것을 지금 바로하고 있습니까? 전환에 0 이외의 기간을 추가했기 때문에 애니메이션이 꽤 이상합니다. https://jsfiddle.net/nph/qn5x9vp0/ –

@ NathanHinchey 내 의도는 백분율 값을 기준으로 반원의 오른쪽 끝에서 왼쪽으로 진행률을 플로팅하는 것이지만 작동하지는 않았습니다. 0에서 newValue * (Math.PI/180)까지의 arcTween에서 arcLine 객체의 startAngle()을 조정 했으므로 this와 같이 실행됩니다.이 값을 다시 0으로 변경하면 코드가 작동합니다. startAngle이 180도 필요하고 왼쪽으로 그려야합니다. 예를 들어, 플롯해야하는 백분율 값이 30이면 반원의 180도부터 시작하여 왼쪽으로 30 %를 그려야합니다. –

먼저 내 뇌를 부수는 호로 rotate(90)을 얻었으므로 제거했습니다. 이제 각도가 어디인지 생각해 봅시다.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    Click Chart to Re-Animate! 
 
    <div id="chart"></div> 
 
    <script> 
 
    var percent = Math.random() * 100; 
 

 
    var pie = d3.layout.pie() 
 
     .value(function(d) { 
 
     return d 
 
     }) 
 
     .sort(null); 
 

 
    var w = 300, 
 
     h = 300; 
 

 
    var outerRadius = (w/2) - 10; 
 
    var innerRadius = 85; 
 

 

 
    var color = ['#ececec', '#f06b3e', '#888888']; 
 

 
    var colorOld = '#F00'; 
 
    var colorNew = '#0F0'; 
 

 
    var arc = d3.svg.arc() 
 
     .innerRadius(innerRadius) 
 
     .outerRadius(outerRadius) 
 
     .startAngle(0) 
 
     .endAngle(Math.PI); 
 

 

 
    var arcLine = d3.svg.arc() 
 
     .innerRadius(innerRadius) 
 
     .outerRadius(outerRadius); 
 

 
    var svg = d3.select("#chart") 
 
     .append("svg") 
 
     .attr({ 
 
     width: w, 
 
     height: h, 
 
     class: 'shadow' 
 
     }).append('g') 
 
     .attr({ 
 
     transform: 'translate(' + w/2 + ',' + h/2 + ')' 
 
     }) 
 
     .on('click', function(){ 
 
     pathForeground.transition() 
 
      .duration(1000) 
 
      .ease('cubic') 
 
      .call(arcTween, Math.random() * 100, 0); 
 
     }); 
 

 
    var path = svg.append('path') 
 
     .attr({ 
 
     d: arc, 
 
     transform: 'rotate(-90)' 
 
     }).attr({ 
 
     'stroke-width': "1", 
 
     stroke: "#666666" 
 
     }) 
 
     .style({ 
 
     fill: color[0] 
 
     }); 
 

 
    var pathForeground = svg.append('path') 
 
     .datum({ 
 
     endAngle: 0 
 
     }) 
 
     .style({ 
 
     fill: function(d, i) { 
 
      return color[1]; 
 
     } 
 
     }); 
 

 
    var middleCount = svg.append('text') 
 
     .datum(0) 
 
     .text(function(d) { 
 
     return d; 
 
     }) 
 
     .attr({ 
 
     class: 'middleText', 
 
     'text-anchor': 'middle', 
 
     dy: 0, 
 
     dx: 5 
 
     }) 
 
     .style({ 
 
     fill: d3.rgb('#000000'), 
 
     'font-size': '60px' 
 
     }); 
 

 
    var oldValue = 0; 
 
    
 
    var arcTween = function(transition, newValue, oldValue) { 
 
     transition.attrTween("d", function(d) { 
 

 
     arcLine.startAngle(Math.PI/2); 
 
     
 
     var interpolate = d3.interpolate(Math.PI/2, (Math.PI/2) - (Math.PI * (newValue/100))); 
 
     var interpolateCount = d3.interpolate(oldValue, newValue); 
 

 
     return function(t) { 
 
      d.endAngle = interpolate(t); 
 
      middleCount.text(Math.floor(interpolateCount(t)) + '%'); 
 
      return arcLine(d); 
 
     }; 
 
     }); 
 
    }; 
 

 
    pathForeground.transition() 
 
     .duration(1000) 
 
     .ease('cubic') 
 
     .call(arcTween, percent, oldValue); 
 
    </script> 
 
</body> 
 

 
</html>

출처

2017-10-11 15:09:42 Mark

d3js를 사용하여 반원형 도넛 형 차트에서 오른쪽에서 왼쪽으로 진행 경로를 그립니다.

답변

관련 문제