4

円の上にマウスを置いたときに、この散布図が円を強調表示する方法が気に入っています: http://novus.github.com/nvd3/examples/scatterWithLegend.html

しかし、そこには多くのコードがあり (作成者が独自の標準ライブラリを定義しているように見えます)、その効果がどのように達成されるのか正確にはわかりません。

.hoverクラスとstroke-widthプロパティと関係がありますか?

パスではなく円を使用していますが、自分の散布図で同じ効果を実現したいので、不可能かもしれません。

4

1 に答える 1

8

例では、 136行目からのscatter.jsで効果が実現しているようです。

ただし、個々の円を強調表示するだけの方がはるかに簡単で、例で行う他のすべてのものは必要ありません。必要なのは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); });

highlightCSS クラスがスタイルを定義すると仮定しています。circle:hoverまたは、イベント ハンドラーを必要とせずに(この例では) CSS クラスを使用することもできます。

于 2012-05-27T11:07:47.513 に答える