Question

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

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

以下是圈子更新代码段：

        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所提到的，问题是您是否正在根据数据集创建多个圈子。要获得平滑过渡，请仅绘制一个圆，然后根据＆＃39; myCounter＆＃39;更新半径。一个例子：

＆＃13;

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] });
};

＆＃13;

html, body{
	height: 100%;
}

.middle{
	margin: 100px auto;
}

#theButton{
	position: absolute;
	left:50px;
	top:50px;
}

＆＃13;

<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>

＆＃13;

根据您的数据，有几次圈子不会因为数据相同而发生变化，但转换应该会有效。

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

1 个答案: