使用D3.js v4,我試圖更新按鈕單擊上的圓的半徑。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;
}
});
};
當您第一次打開小提琴時,您認爲有多少個圈子? – echonax
不知道我是否理解這個問題,應該只有一個圓圈,其半徑被更新(基於一維數組中的值),每按一次按鈕,點擊 –
:)打開你的檢查器,看看你的svg元素。已經附加了9個圈子到你的svg。也就是說,每個'dataset'元素都有1個。 – echonax