D3.js v4圆弧半径转换不按预期工作

Question

使用D3.js v4，我试图更新按钮单击上的圆的半径。

问题在于，在每次更新时，将重绘（而不是从'radius1'到0，然后到'radius2'）圆形的smooth transitions between the radii。

下面是完整的代码： https://jsfiddle.net/4r6hp9my/

这里的圈子更新的代码片段：

 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

正如echonax提到的，问题是你创建一个基于数据集的多个圈。为了平滑过渡，只绘制一个圆圈，并根据'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>

根据您的数据，有几次的圈子不会改变，因为该数据是一样的，但是当它的过渡应该工作。