在鼠標懸停事件d3上更改條尺寸js

Question

我正在創建一個條形圖，我希望在其中具有焦點功能。所以每當我選擇，鼠標懸停事件，特定的酒吧，酒吧的寬度和高度增加和其他一切保持不變，使這個酒吧更爲重點。事情是這樣的： -

比方說，如果我將鼠標懸停第二欄上的鼠標，它應該是這樣的： -

是可以充分利用的對焦和變焦功能d3.js？

Answer 1

扔了什麼東西一起爲你https://jsfiddle.net/guanzo/h1hdet8d/1/

它不佔軸/標籤可言，但它應該讓你開始。這個想法是，在盤旋時你增加了酒吧的規模。計算它有多少寬度，然後除以2得到多少你應該轉移其他酒吧。

重要提示：在杆上應用.style('transform-origin','bottom')，使它們向上生長並均勻地向兩側生長。

g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.letter); }) 
     .attr("y", function(d) { return y(d.frequency); }) 
     .attr("width", x.bandwidth()) 
     .attr("height", function(d) { return height - y(d.frequency); }) 
     .style('transform-origin','bottom') 
     .on('mouseover',mouseover) 
     .on('mouseout',mouseout) 

function mouseover(data,index){ 
    var bar = d3.select(this) 
    var width = bar.attr('width') 
    var height = bar.attr('height') 

    var scale = 1.5; 

    var newWidth = width* scale; 
    var newHeight = height*scale; 

    var shift = (newWidth - width)/2 

    bar.transition() 
    .style('transform','scale('+scale+')') 


    d3.selectAll('.bar') 
    .filter((d,i)=> i < index) 
    .transition() 
    .style('transform','translateX(-'+shift+'px)') 

    d3.selectAll('.bar') 
    .filter((d,i)=> i > index) 
    .transition() 
    .style('transform','translateX('+shift+'px)') 


} 

function mouseout(data,index){ 
d3.select(this).transition().style('transform','scale(1)') 
d3.selectAll('.bar') 
    .filter(d=>d.letter !== data.letter) 
    .transition() 
    .style('transform','translateX(0)') 
}