0

私が次のものを持っていると仮定します：

var vis = d3.select('svg')
    .attr({width: 400, height: 400});

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians
    .endAngle(3) //just radians

var arc2 = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(30)
    .startAngle(180 * (Math.PI/180)) //converting from degs to radians
    .endAngle(5) //just radians

var position = [200,200];

単一の円弧にマウスを合わせると、それ自体と他の円弧の両方が拡大するようにするにはどうすればよいですか。拡大するとは、マウスオーバーで innerRadius と outerRadius が大きくなり、マウスアウトで元のサイズに戻ることを意味します。

次を使用して、単一の円弧を拡張しようとしました。

arc.on("mouseover", function() {
   arc.innerRadius(40);
   arc.outerRadius(90);
});

効果がないように見えますが。私は何を間違っていますか？

4

1 に答える 1

1

まず、アークを実際に SVG に追加する必要があります。

var arcPath = vis.append("path")
    .attr("d", arc);

dこれを行うと、arc 関数が単純に SVG パス文字列を生成し、パスのプロパティとして設定できることがわかります。dしたがって、マウスオーバー時にパスのプロパティを更新する必要があります。たとえば、次のことができます。

var arcHover = d3.svg.arc()
    .innerRadius(40)
    .outerRadius(90)
    .startAngle(45 * (Math.PI/180))
    .endAngle(3);

arcPath.on("mouseover", function(e) {
    arcPath.attr("d", arcHover);
});

これが実際の例です: http://jsfiddle.net/XaszF/

于 2013-03-09T06:51:12.383 に答える