Question

In the d3js bubble chart shown in the following link : http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html?_r=0#!

the bubble gets highlighted when it is clicked . I want to implement that feature in my d3js bubble chart. Does anyone know how to do it? Thanks in advance .

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。

Bubble highlight feature in d3js bubble chart

2 个答案: