单击按钮时,如何更改特定圆的半径?
问题描述:
我已经提出了一个问题,帮助我找出在圆上单击时如何更改圆的半径。单击按钮时,如何更改特定圆的半径?
<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中做同样的事情?
答
您可以如下设置id
属性:
circle.attr('id', function(d, i){ return 'circle_' + i;});
或者设置类:
circle.attr('class', function(d, i){
if(i === 12){
return 'specialCircle';} else {
return 'normalCircle';}
});
http://jsfiddle.net/DerekL/jxof57ac/ – 2014-10-17 14:16:50