Как получить текущую высоту элемента?

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 Я мог бы код вверх.