D3을 사용하여 마우스 오버시 요소 크기 변경

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)); 
     }) 

을하지만이 코드의 크기에 변화가 없습니다, 중 문제가 해결되지 않았다. 로그의 로그를 작성하는 경우 로그의 값이 auto 일 때 rect의 높이 값을 얻는 데 문제가 있다고 생각하게됩니다. 어떤 구문을 사용해야합니까?

편집 : 다음 내 누적 막대 그래프 아래 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)) 
    }); 
    }) 

Answer 1

사용

: 여기

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 2

데모를위한 바이올린의

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

크기를 110 %로 변경

d3.select(this).style("height")은 "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);