mouseoverイベントのバーの寸法を変更するd3 js

Question

私は棒グラフを作成していますが、その中にフォーカス機能があります。だから私が選択するたびに、mouseoverイベント、特定のバー、バーの幅と高さが増え、それ以外のものは同じままです。このような何か： -

私は第二のバーの上にマウスを置くならば、それは次のようになりますと言うことができます： -

のは、の焦点とズーム機能を利用することが可能です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)') 
}