D3を使用してmouseoverで要素サイズを変更する

Question

私は過去に積み上げ棒グラフを作成しましたが、マウスオーバーにいくつかのきれいな効果を追加しました。これらを追加すると、マウスが矩形を離れると、ユーザーがホバーしている矩形のサイズを変更して、デフォルトのサイズに戻すことができます。

目標は、したがって、私が使用して高さを始め、マウスオーバーでサイズの長方形の変更を行うことです。

 .on('mouseover', function(d){ 
     d3.select(this).style("height", "110%"); 
     }) 

はそれの元の高さに比べて110％の高さを受信するための四角形を期待。残念ながらそれはこの方法では機能しません。代わりにdivの高さの110％を得ます。だから私はD3セレクターを代わりに使ってみました：

 .on('mouseover', function(d){ 
     d3.select(this).style("height", d3.select(this).style("height")*1.10)); 
     }) 

しかし、これは問題を解決しませんでしたが、このコードではサイズの変更はありません。私がログを作成している要素の高さをログに記録すると、rectの高さの値を取得する際に何か間違っていると信じられるautoが読み取られます。どの構文を使用する必要がありますか？

編集：ここではデモンストレーションのためのフィドルだ

Jaar.selectAll("rect") 
    .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.y1); }) 
    .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
    .style("fill", function(d) { return color(d.name); }) 
    .style("opacity", 1) 
    .on('mouseover', function(d){ 
     d.color = color(d.name); 
     d3.select(this).style("opacity", 1); 
     d3.select(this).style("height", height*1.1); 
     d3.select(this).style("width", width*1.1); 
     console.log(d3.select(this).style("width")); 
     tip.show(d); 
     }) 
     .on('mouseout', function(d) { 
     d3.select(this).style("opacity", 0.6); 
     d3.select(this).style("height", height); 
     d3.select(this).style("width", width); 
     tip.hide(d); 
     }); 

Answer 1

使用

d3.select(this).attr("height", (y(d.y0) - y(d.y1))*1.1); 

サイズを110％に変更する

は「100px」などの文字列なので、d3.select(this).style("height")*1.10は実行できません。あなたは何ができるか

は

var newHeight = parseInt(d3.select(this).style("height"))*1.1 + "px"; 
d3.select(this).style("height", newHeight); 

Answer 2

：以下echonaxの答えをしようと、私の積み上げ棒グラフでrect要素の完全なコードは次のようにされてhttp://jsfiddle.net/q5q6331p/16/

.on("mouseover", function(d) { 
    d3.select(this).attr("height", function(d){ 
     return (y(d.y0) - y(d.y0 + d.y))*1.5 
    }); 
    }) 
    .on("mouseout", function(d) { 
    d3.select(this).attr("height", function(d){ 
     return (y(d.y0) - y(d.y0 + d.y)) 
    }); 
    })