Javascript d3js气泡图中的气泡突出显示功能

在下面链接中显示的d3js气泡图中：

单击气泡时，气泡将高亮显示。我想在我的d3js气泡图中实现这个特性。有人知道怎么做吗？

---

提前谢谢

单击气泡时，将

g-selected

类添加到节点。这将更改从应用的css

.g-node .g-democrat {
    fill: #c5d7ea;
}
.g-node .g-republican {
    fill: #f9caca;
}

到

将类添加到单击的元素非常简单。使用

选择.classed

方法添加类

node.classed("g-selected", function(d) { return d === topic; });

如果您正在查看，请查看

updateActiveTopic

函数

小提琴中的代码比链接的示例要简单得多。我将更改创建圆形元素的部分，使其使用css，而不是内联样式，即

circle {
    fill: green;
}

而不是

 .style("fill", function (d, i) {
      return "green";
 })

现在，您将向圆圈添加一个单击处理程序：

circle.on("click", function(d) {
        // remove selected class from all circles that have it
        circle.classed('selected', false);

        //add the selected class to the element that was clicked
        d3.select(this).classed('selected', true)
    });

以及选择圆时亮显该圆的样式

circle.selected {
    fill: blue;
    stroke: black;
    stroke-width: 1.5px;
}

---

有关完整的示例，请参见。

这里是您尝试实现的基本起点。首先，您需要在圆中添加单击功能

circle.on('click', function(d){
    //grabs all the circles from your array
    var allCircles = circle[0]

    //Used to cycle through to see if any of them are classed with the 'selected' class'
    for (var i=0; i<allCircles.length; i++){
        d3.select(allCircles[i]).classed('selected', false)
        d3.select(allCircles[i]).attr('style', 'fill: rgb(0,128,0);')
    }

    //Set the circle you clicked on to have no inline style and classed to 'selected'
    d3.select(this).attr('style', '')
    d3.select(this).classed('selected', true)
})

circle.on（'click'，函数（d）{
//从阵列中获取所有圆
var allCircles=circle[0]
//用于循环查看其中是否有使用“选定”类进行分类
对于（var i=0；i），您可以查看。您可以根据需要编辑CSS。目前，它只是用蓝色填充圆圈，但您可以使用类似于您发布的示例的CSS。
您可以发布您当前在a中的代码吗？这是我想知道如何在下面的示例中实现它的方法
circle.on('click', function(d){
    //grabs all the circles from your array
    var allCircles = circle[0]

    //Used to cycle through to see if any of them are classed with the 'selected' class'
    for (var i=0; i<allCircles.length; i++){
        d3.select(allCircles[i]).classed('selected', false)
        d3.select(allCircles[i]).attr('style', 'fill: rgb(0,128,0);')
    }

    //Set the circle you clicked on to have no inline style and classed to 'selected'
    d3.select(this).attr('style', '')
    d3.select(this).classed('selected', true)
})