Javascript 更改鼠标悬停事件d3 js上的条尺寸

我正在创建一个条形图，我想在其中有一个焦点功能。因此，每当我选择鼠标悬停事件时，一个特定的条，条的宽度和高度都会增加，其他一切都会保持不变，使该条更加聚焦。类似这样的：

假设我将鼠标悬停在第二个栏上，它应该是这样的：-

---

是否可以利用d3.js的聚焦和缩放功能？

为您整合了一些东西

它根本不考虑轴/标签，但它应该让您开始。这个想法是，在悬停时，您可以增加条的比例。计算它还有多少宽度，然后除以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)')
}

g.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.attr（“宽度”，x.带宽（））
.attr（“高度”，函数（d）{返回高度-y（d.frequency）；}）
.style（'transform-origin'，'bottom'）
.on（'mouseover'，mouseover）
.on（'mouseout'，mouseout）
功能鼠标悬停（数据、索引）{
变量条=d3。选择（此）
var width=bar.attr（'width'）
变量高度=bar.attr（'高度'）
var标度=1.5；
var newWidth=宽度*比例；
var newHeight=高度*刻度；
变量移位=（newWidth-width）/2
bar.transition（）
.style（'transform'，'scale（'+scale+'））
d3.选择全部（“.bar”）
.filter（（d，i）=>i<索引）
.transition（）
.style（'transform'，'translateX（-'+shift+'px'））
d3.选择全部（“.bar”）
.filter（（d，i）=>i>索引）
.transition（）
.style（'transform'，'translateX（'+shift+'px'））
}
功能鼠标输出（数据、索引）{
d3.选择（this）.transition（）.style（'transform'，'scale（1）'））
d3.选择全部（“.bar”）
.filter（d=>d.letter！==data.letter）
.transition（）
.style（'transform'，'translateX（0）'
}