曲がった罫線のあるマルチドーナツグラフ

Question

曲がった端でドーナツグラフを作成しようとしています。このグラフには複数のシリーズがあります。

私も私のニーズに似てバイオリンを発見した：jsfiddle.net/freezystem/henr4ozn/

をしかし、これはV3であると私はV4に変換しようとしているが、レンダリングに失敗してきましたグラフ。私はV4に上記jsfiddleの変換を落としていると私は

をV4するために、このjsfiddle.net/minnie_mouse/033jrrz8/を変換しようとしています。しかし、まだ、私はレンダリングされた同じを取得していない午前コメントや複雑さを1として

画像。

const d3 = this.d3; 
    const arcTween = function (transition, newAngle, arc) { 
     transition.attrTween('d', function (d) { 
      const interpolate = d3.interpolate(d.endAngle, newAngle); 

      return function (t) { 
       d.endAngle = interpolate(t); 
       return arc(d); 
      }; 
     }); 
    }; 


    const createCircle = function (svg, outerRadius, innerRadius, color, percent) { 
     debugger; 
     const ratio = percent/100; 

     const arcBackground = d3.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0) 
      .endAngle(2 * Math.PI); 

     const pathBackground = svg.append('path') 
      .attr('d', arcBackground) 
      .style({ 
       fill: '#585e65', 
       opacity: .2 
      }); 

     const arcForeground = d3.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .cornerRadius(20) 
      .startAngle(-0.05); 

     const pathForeground = svg.append('path') 
      .datum({ endAngle: 0 }) 
      .attr('d', arcBackground) 
      .style({ 
       fill: color 
      }).append('text') 
      .attr('transform', 'translate(10,10)') 
      .text('hi') 
      .attr('fill', 'white') 
      .attr('font-size', '20px'); 


     pathForeground.transition() 
      .duration(1500) 
      .ease('elastic') 
      .call(arcTween, ((2 * Math.PI)) * ratio, arcForeground); 



     const chart = { path: pathForeground, arc: arcForeground }; 

     return chart; 
    }; 





    const addStartImage = function (svg, percent, outerRadius) { 

     svg.append('text') 
      .text(percent + '%') 
      .attr('font-size', '10px') 
      .attr('font-weight', 'bold') 
      .attr('fill', 'white') 
      .attr({ 
       width: 20, 
       height: 20, 
       transform: 'translate(4,' + (-outerRadius + 20) + ')' 
      }); 

    }; 




    const w = 300, h = 300; 
    let outerRadius = (w/2); 
    const width = 30, gap = 14; 

    const innerRadius = outerRadius - 30; 

    const color = ['#e90b3a', '#a0ff03', '#1ad5de']; 

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

    const circles = [ 
     { name: 'activity1', percent: 50, color: '#3e4eb7' }, 
     { name: 'activity2', percent: 66, color: '#50a7ff' }]; 



    for (let i = 0; i < circles.length; ++i) { 
     if (i > 0) { 
      outerRadius = innerRadius - gap; 
     } 

     circles[i]['chart'] = createCircle(svg, outerRadius, innerRadius, circles[i].color, circles[i].percent); 

     addStartImage(svg, circles[i].percent, outerRadius); 
    } 

Answer 1

私はそれがsuccessfully.Hereを実行するようになったAtlastは、あなたの質問を編集し、（失敗している）コードとすべてのエラーメッセージを記載してくださいコード

const d3 = this.d3; 
    const arcTween = function (transition, newAngle, arc) { 
     transition.attrTween('d', function (d) { 
      const interpolate = d3.interpolate(d.endAngle, newAngle); 

      return function (t) { 
       d.endAngle = interpolate(t); 
       return arc(d); 
      }; 
     }); 
    }; 


    const createCircle = function (svg, outerRadius, innerRadius, color, percent) { 
     const ratio = percent/100; 

     const arcBackground = d3.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .startAngle(0) 
      .endAngle(2 * Math.PI); 

     const pathBackground = svg.append('path') 
      .attr('d', arcBackground) 
      .style({ 
       fill: '#585e65', 
       opacity: .2 
      }); 

     const arcForeground = d3.arc() 
      .innerRadius(innerRadius) 
      .outerRadius(outerRadius) 
      .cornerRadius(20) 
      .startAngle(-0.05); 

     const pathForeground = svg.append('path') 
      .datum({ endAngle: 0 }) 
      .attr('d', arcBackground) 
      .style('fill', color); 

     pathForeground.append('text') 
      .attr('transform', 'translate(10,10)') 
      .text('hi') 
      .attr('fill', 'white') 
      .attr('font-size', '20px'); 

      pathForeground.transition() 
      .duration(2000) 
      .transition() 
      .ease(d3.easeElastic) 
      .call(arcTween, ((2 * Math.PI)) * ratio, arcForeground); 



     const chart = { path: pathForeground, arc: arcForeground }; 

     return chart; 
    }; 





    const addStartImage = function (svg, percent, outerRadius) { 

     svg.append('text') 
      .text(percent + '%') 
      .attr('font-size', '10px') 
      .attr('font-weight', 'bold') 
      .attr('fill', 'white') 
      .attr({ 
       width: 20, 
       height: 20, 
       transform: 'translate(4,' + (-outerRadius + 20) + ')' 
      }); 

    }; 




    const w = 300, h = 300; 
    let outerRadius = (w/2); 
    const width = 30, gap = 14; 

    const innerRadius = outerRadius - 30; 

    const color = ['#e90b3a', '#a0ff03', '#1ad5de']; 

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

    const circles = [ 
     { name: 'activity1', percent: 50, color: '#3e4eb7' }, 
     { name: 'activity2', percent: 66, color: '#50a7ff' }]; 



    for (let i = 0; i < circles.length; ++i) { 
     if (i > 0) { 
      outerRadius = innerRadius - gap; 
     } 

     circles[i]['chart'] = createCircle(svg, outerRadius, innerRadius, circles[i].color, circles[i].percent); 

     addStartImage(svg, circles[i].percent, outerRadius); 
    }