如何获得当前元素高度？

Question

为了能够顺利过渡条形图中的条形，我需要在调用transition()之前设置高度。

当图表首先根据需要从图表底部渲染条形图时生成动画：

    chart.svg.selectAll('.bar')
        .attr('y', chart.options.height)
        .attr('x', function (d) {
            return chart.xScale(d.title);
        })
        .attr('width', chart.xScale.rangeBand())
        .attr('height', function () {
            return 0;
        })
        .transition()
        .attr('y', function (d) {
            return chart.yScale(d.score);
        })
        .attr('height', function (d) {
            return chart.options.height - chart.yScale(d.score);
        });

但是，当我更改数据时，我不想将高度设置回0。相反，我需要将高度设置为矩形的当前高度。如何从attr函数访问它？

        .attr('height', function () {
            return 0; // how do I get the current height
        })

当我记录this时，我可以访问DOM元素但不知道从那里去哪里。我试过了d3.select(this).attr('height')，但它总是返回null。

Answer 1

正如@LarsKotthoff在他的评论中暗示的那样，只是将你的初步抽奖与你的更新分开：

// intial draw of bars
node
  .enter()
  .append("rect")
  .attr("class", "myBars")
  .style("fill", "steelblue")
  .attr('y', config.height)
  .attr('x', function(d, i) {
    return xScale(i);
  })
  .attr('width', xScale.rangeBand())
  .attr('height', function() {
    return 0;
  });      

然后触发更新以将条形转换为当前位置：

function update() {
  node = svg
    .selectAll(".myBars")
    .data(data);
  node
    .transition()
    .attr('y', function(d) {
      return yScale(d);
    })
    .attr("height", function(d) {
      return config.height - yScale(d);
    });
}

这是我可以编写的最小example。