D3.js 如何获取当前元素高度？

为了使条形图中的条形图平滑过渡，我需要在调用

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
        })

---

当我记录

这个

时，我可以访问DOM元素，但不确定从那里去哪里。我尝试了

d3。选择（this）.attr（'height'）

，但它总是返回null。

正如@Larskothoff在他的评论中暗示的那样，只需将您的初始绘图与更新分开：

// 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);
    });
}

这是我能编写的最简单的代码

---

如果高度已设置，则无需重新设置。对于新数据，只需添加

.transition（）.attr（“height”，…）

。