D3.js円の半径が期待通りに動作しない

Question

D3.js v4を使用して、ボタンのクリック時に円の半径を更新しようとしています。

smooth transitions between the radiiの代わりに、各更新時に円が再描画されます（「半径1」から「0」まで、次に「半径2」のみに）。 https://jsfiddle.net/4r6hp9my/

はここで円更新コードスニペットです：

echonaxで述べたように

 var circles = svg.selectAll('circle').data(dataset); 

     var enter = circles 
     .enter() 
     .append('circle') 
     .attrs({ 
      cx: w/2, 
      cy: h/2, 
      fill: colorsScale, 
      r: function(d,i){ 
       if(i == myCounter){ 
        var x = rScale(d) 
       return x; 
       } 
      } 
     }); 

     d3.select('#theButton') 
      .on('click',function(){ 
       myCounter++ 
       if(myCounter == dataset.length){ 
        myCounter = 0; 
       }; 
       updateData() 
      }); 

     function updateData(){ 
      circles 
      .merge(enter) 
      .transition() 
      .attr('r',function(d,i){ 
       if(i == myCounter){ 
        return rScale(d); 
       } 
      }); 
      labels 
      .text(function(d,i){ 
       if(i == myCounter){ 
       return d; 
       } 
      }); 

     }; 

Answer 1

、問題はあなたがデータセットに基づいて複数の円を作成しているある

はここで完全なコードです。円滑な遷移を得るには、円を1つだけ描き、 'myCounter'に基づいて半径を更新します。例：あなたのデータに基づいて

var dataset = [2184,2184,3460,2610,2610,2452,842,1349,2430]; 
 

 
var myCounter = 0; 
 
//svg dimensions 
 
var h = 200; 
 
var w = 200; 
 

 
var svg = d3.select('body') 
 
.append('svg') 
 
.attrs({ 
 
    width: w, 
 
    height: h 
 
}) 
 
.classed('middle',true); 
 
//color mapping 
 
var colorsScale = d3.scaleLinear() 
 
.domain([d3.min(dataset),d3.max(dataset)]) 
 
.range(['#FFB832','#C61C6F']); 
 
//radius mapping 
 
var rScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0,50]) 
 
//labels 
 
var label = svg.append("text").attrs({ 
 
    x: w/2, 
 
    y: 20 
 
}).text(function(){ return dataset[myCounter] }); 
 

 
//draw the circles 
 
var circle = svg.append('circle') 
 
.attrs({ 
 
    cx: w/2, 
 
    cy: h/2, 
 
    fill: function() { return colorsScale(dataset[myCounter]) }, 
 
    r: function() { return rScale(dataset[myCounter]) } 
 
}); 
 
//button click 
 
d3.select('#theButton') 
 
    .on('click',function(){ 
 
    updateData() 
 
}); 
 

 
function updateData(){ 
 
\t myCounter++; 
 
    if (myCounter > dataset.length - 1) myCounter = 0; 
 
    circle.transition().attr('r',function(){ return rScale(dataset[myCounter]) }).attr('fill', function() { return colorsScale(dataset[myCounter]) }); 
 
    label.text(function(){ return dataset[myCounter] }); 
 
};

html, body{ 
 
\t height: 100%; 
 
} 
 

 
.middle{ 
 
\t margin: 100px auto; 
 
} 
 

 
#theButton{ 
 
\t position: absolute; 
 
\t left:50px; 
 
\t top:50px; 
 
}

<script src="https://d3js.org/d3.v4.js"></script> 
 
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script> 
 
     
 
<button id="theButton" type="button">Click Me!</button>

、そこに数回はデータが同じであるとして円は変更されないことですが、それがないときの移行が動作するはずです。