javascript - 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 函数。

您的 fiddle 中的代码比您链接的示例要简单得多。我会更改创建圆形元素的部分，以便它使用 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完整的示例。