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

Question

在以下链接所示的 d3js 气泡图中：http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html?_r=0#!

单击气泡时会突出显示。我想在我的 d3js 气泡图中实现该功能。有谁知道该怎么做？ 提前致谢 。

Answer 1

当您单击气泡时，g-selected 类将添加到节点中。这改变了从

应用的 css

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

到

.g-node.g-selected .g-democrat {
    fill: #99c0e5;
    stroke: #6081a3;
    stroke-width: 1.5px;
}
.g-node.g-selected .g-republican {
    fill: #fda4a7;
    stroke: #af5e61;
    stroke-width: 1.5px;
}

向被点击的元素添加一个类非常简单。该类是使用selection.classed 方法添加的。

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

如果您正在查看the source，请查看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;
}

完整示例请参见fiddle。

Answer 2

这是您要实现的目标的基本开始。您需要首先向您的圈子添加点击功能。

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

我有updated the fiddle，所以你可以看到。您可以根据需要编辑 CSS。目前，它只是用蓝色填充来填充圆圈，但您可以使用类似于您发布的示例的 CSS。