d3.jsで1つの円弧が太くなる

javascriptとd3.jsの新機能です私は円グラフを作成しようとしています。 I want to create something like this. 私はd3.jsを使用しています。私は円弧の一つを太くしたい。私はこれを行うことがわかりません。私はちょうど "エンゲージド"アイテムだけを厚くしたい。パーセンタイルには関係しません。ここでd3.jsで1つの円弧が太くなる

は私のjsのコードです：

var engaged = 10; 
var notEngaged = 50; 
var maybeEngaged = 50; 

var engagedYuzdelik = (100*engaged)/(engaged+notEngaged+maybeEngaged); 
var notEngagedYuzdelik = (100*notEngaged)/(engaged+notEngaged+maybeEngaged); 
var maybeEngagedYuzdelik=(100*maybeEngaged)/(engaged+notEngaged+maybeEngaged); 

var dataset = [ 
     { name: 'Engaged', percent: [engagedYuzdelik.toFixed(2)] }, 
     { name: 'Not Engaged', percent: [notEngagedYuzdelik.toFixed(2)] }, 
     { name: 'Maybe Not Engaged', percent: [maybeEngagedYuzdelik.toFixed(2)] }, 

    ]; 

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

    var w=300,h=300; 
    var radius = Math.min(w, h)/2; 

    var outerRadius=w/2; 
    var innerRadius=100; 

    var color = d3.scale.ordinal() 
    .range(["#65A6BF", "#9AC4D7", "#CCE2EA"]); 

    var arc=d3.svg.arc() 
      .outerRadius(radius - 50) 
      .innerRadius(radius - 60); 

    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.selectAll('path') 
      .data(pie(dataset)) 
      .enter() 
      .append('path') 
      .attr({ 
       d:arc, 
       fill:function(d,i){ 
        return color(d.data.name); 
       } 
      }); 

    path.transition() 
      .duration(1000) 
      .attrTween('d', function(d) { 
       var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d); 
       return function(t) { 
        return arc(interpolate(t)); 
       }; 
      }); 


    };

出典

2017-09-25 user8654574

は、アーク条件を描いてください：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="chart"></div> 
 
    <script> 
 
     var engaged = 10; 
 
var notEngaged = 50; 
 
var maybeEngaged = 50; 
 

 
var engagedYuzdelik = (100*engaged)/(engaged+notEngaged+maybeEngaged); 
 
var notEngagedYuzdelik = (100*notEngaged)/(engaged+notEngaged+maybeEngaged); 
 
var maybeEngagedYuzdelik=(100*maybeEngaged)/(engaged+notEngaged+maybeEngaged); 
 

 
var dataset = [ 
 
     { name: 'Engaged', percent: [engagedYuzdelik.toFixed(2)] }, 
 
     { name: 'Not Engaged', percent: [notEngagedYuzdelik.toFixed(2)] }, 
 
     { name: 'Maybe Not Engaged', percent: [maybeEngagedYuzdelik.toFixed(2)] }, 
 

 
    ]; 
 

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

 
    var w=300,h=300; 
 
    var radius = Math.min(w, h)/2; 
 

 
    var outerRadius=w/2; 
 
    var innerRadius=100; 
 

 
    var color = d3.scale.ordinal() 
 
    .range(["#65A6BF", "#9AC4D7", "#CCE2EA"]); 
 

 
    var thinArc = d3.svg.arc() 
 
      .outerRadius(radius - 50) 
 
      .innerRadius(radius - 60), 
 
     thickArc = d3.svg.arc() 
 
      .outerRadius(radius - 10) 
 
      .innerRadius(radius - 100); 
 

 
    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.selectAll('path') 
 
      .data(pie(dataset)) 
 
      .enter() 
 
      .append('path') 
 
      .attr({ 
 
       fill:function(d,i){ 
 
        return color(d.data.name); 
 
       } 
 
      }); 
 

 
    path.transition() 
 
      .duration(1000) 
 
      .attrTween('d', function(d) { 
 
       var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d); 
 
       return function(t) { 
 
        if (d.data.name === "Maybe Not Engaged"){ 
 
         return thickArc(interpolate(t)); 
 
        } else { 
 
         return thinArc(interpolate(t)); 
 
        } 
 
       }; 
 
      }); 
 
    </script> 
 
    </body> 
 

 
</html>

出典

2017-09-25 16:55:54 Mark

d3.jsで1つの円弧が太くなる

答えて

関連する問題