D3.js v4 圆半径过渡未按预期工作

Question

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

问题在于，每次更新时都会重绘圆圈而不是 smooth transitions between the radii（从“radius1”变为 0，然后才变为“radius2”）。

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

这是圈子更新代码sn-p：

        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(){
	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{
	height: 100%;
}

.middle{
	margin: 100px auto;
}

#theButton{
	position: absolute;
	left:50px;
	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>

根据您的数据，有几次圆圈不会改变，因为数据是相同的，但当它改变时，转换应该会起作用。