Как достигается этот приятный эффект выделения меток D3.js?

Question

Я люблю, как это scatterchart подчеркивает круги при наведении на них: http://novus.github.com/nvd3/examples/scatterWithLegend.html

Но есть много коды там (выглядит как автор определил его/ее собственные стандартные библиотеки), и я не могу точно выяснить, как достигается эффект.

Это как-то связано с классом .hover и stroke-width?

Я хотел бы добиться такого же эффекта на моем собственном графе рассеяния, хотя я использую круги, а не пути, поэтому это может быть невозможно.

Answer 1

В примере, эффект, кажется, понял, в scatter.js от линии 136.

Просто выделяя отдельные кружки гораздо проще, хотя и не нужно все другие вещи, пример делает. Все, что вам нужно сделать, это добавить обработчик mouseover в круги и (например) увеличить stroke-width. Это будет выглядеть примерно так

d3.selectAll("circle").data(...).enter() 
    .append(...) 
    .classed("circle", true) 
    .on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); }) 
    .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); }); 

Я предполагаю, что CSS класс highlight определяет стиль. Кроме того, вы можете просто использовать (в этом примере) класс CSS circle:hover без использования обработчиков событий.