Функция выделения пузырьков в диаграмме пузырьков 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, аналогичный тому, который вы опубликовали.