2

ホバーすると色が変わるSVG円とテキスト要素があります...

var texts = svgcontainer.selectAll('text.year')
.data(yeardata).enter().append("svg:a")
.attr('class', 'year')
.append('text').text(function(d) { return d;})
.attr('dx', function(d) { return Math.random()*containerWidth})
.attr('dy', function(d) { return Math.random()*containerWidth})
.attr("xlink:href", '#')
.attr('pointer-events', 'all')
.attr('font-size', function(d) { return scale2(d) })
.style('font-family', 'Arial')
.attr('font-weight', 'bold')
.attr('font-style', 'italic')
.attr('fill', '#161738')
.on("mouseover", function(d, i) {
  d3.select(this)
  .transition()
  .duration(200)
  .attr('font-size', function(d) { return 45 })
  .attr('opacity', .5);
  d3.select(circles[0][i])
  .style('fill', 'red');
})
.on("mouseout", function(d, i) {
  d3.select(this)
  .transition()
  .duration(200)
  .attr('font-size', function(d) { return scale2(d) })
  .attr('opacity', 1);
  d3.select(circles[0][i])
  .style('fill', '#3CCAFA');
})
.transition()
.duration(1100)
.attr('dx', function(d) { return d*space + 15.5 })
.attr('dy', 34);

また、選択した (要素をクリックした) ものに、ホバーしたものと同じ属性を持たせたいと思っています。

$('.year').click(function() {
val = ... // this works
years = d3.selectAll('.year');
d3.select(this)
  .attr('opacity', .5)
d3.select(circles[0][val])
  .style('fill', 'red');
})

私の問題は、マウスオーバー イベントがクリック イベントで設定された属性をオーバーライドすることです。クリックした要素に ID を追加し、その属性を css ファイルに設定しようとしましたが、うまくいきませんでした。助けてくれてありがとう！

4

1 に答える 1

0

あなたがやろうとしていることを正確に理解しているかどうかはわかりませんが、おそらくクリックされた要素idまたは要素を設定する正しい軌道に乗っていると思います。classただし、CSS をmouseover使用する代わりに、現在使用しているノード セレクターの代わりに ID またはクラス セレクターを使用するように実装を変更してみてください。

そう：

d3.select("#clickedId");

また：

d3.select(".clickedClass");

次に、クリックした円で見つかったスタイルに基づいて、マウスオーバーした円にスタイルを設定できます。

于 2013-09-19T05:48:09.443 に答える