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