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

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

1 个答案: