单击按钮时，如何更改特定圆的半径？

Question

我已经提出了一个问题，帮助我找出在圆上单击时如何更改圆的半径。

<g id="bubble-nodes"> 
    <rect id="bubble-background"></rect> 
    <a class="class="bubble-node"> 
     <circle r="65"></circle> 
    </a> 
    .... 
</g> 

var circle = d3 
.selectAll('circle') 
.on('click', function (d) { 
    d3.select(this).attr("r", 85); 
}); 

现在，我问我如何在点击按钮时更改特定圆的半径。

<button type="button" onclick="resizeParticularCircle('circle_12')">Click Me</button> 

<g id="bubble-nodes"> 
    <rect id="bubble-background"></rect> 
    <a class="class="bubble-node"> 
     <circle r="65" id="circle_12"></circle> 
    </a> 
    .... 
</g> 

var resizeParticularCircle = function (id) { 
    // nothing I have tried works 
    $('#circle_12').attr('r', '85'); // nope 
} 

在纯javascript/jquery的我很可能放置在每一个圆，并说明以改变另一个元件的id。但我怎样才能在D3中做同样的事情？

Answer 1

您可以如下设置id属性：

circle.attr('id', function(d, i){ return 'circle_' + i;}); 

或者设置类：

circle.attr('class', function(d, i){ 
    if(i === 12){ 
    return 'specialCircle';} else { 
    return 'normalCircle';} 
});