在鼠标悬停事件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)') 
}