Изменить размер бара на событие mouseover d3 js

Question

Я создаю гистограмму, и я хотел бы иметь в ней функцию фокуса. Поэтому всякий раз, когда я выбираю, событие mouseover, конкретный бар, ширина и высота бара увеличиваются, а все остальное остается тем же самым, что делает эту панель более сосредоточенной. Что-то вроде этого: -

Допустим, если я наведите мышь на 2 бара, он должен выглядеть следующим образом: -

ли можно использовать фокус и зум-функциональность 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)') 
}