d3js rescale redraw barchart без новых данных

Question

У меня есть простой (не простой) барчарт, который показывает потребление электроэнергии одним потребителем (C1). Я добавляю потребление другого потребителя (C2) в качестве линии. Максимальное потребление C2, если выше, чем максимальное потребление C1, поэтому я должен перемасштабировать. Я решил эту проблему, но не так красиво, что хотел.

Я вычислил новый yMax, установил домен, перемасштабировал ось (красивый), удалил все «rect» и перерисовал (не красиво). Есть ли возможность сказать: эй бары, у меня есть новый масштаб, спуститесь с красивой анимацией :)

Здесь метод Rescale:

var rescale = function() { 
      //in this function the new _maxYValue is set 
      renderLineView(); 
      var data = _data; 
      y.domain([_minYValue, _maxYValue]); 
      _svg.select(".y.axis") 
         .transition().duration(1500).ease("sin-in-out") 
         .call(yAxis()); 
      _svg.selectAll("rect").remove(); 

      var barWidth = getBarWidth(data.length); 

      var bars = d3.select("#layer_1").selectAll(".bar").data(data, function (d) { 
       return d.xValue; 
      }); 

      bars.enter().append("rect") 
         .attr("class", "daybarincomplete") 
         .attr("x", function (d, i) { 

          return x(d.xValue) + 4; 
         }) 
         .attr("width", barWidth) 
         .attr("y", function (d) { 
          return Math.min(y(0), y(d.value)); 
         }) 
         .attr("height", function (d) { 
          return Math.abs(y(d.value) - y(0)); 
         }); 

     } 

Вот это jsfiddle: http://jsfiddle.net/axman/v4qc7/5/

ТНХ заранее

© Акси

Answer 1

Используйте .transition() вызов на брусьях, чтобы определить поведение, которое вы хотите, когда d ata изменения (например, Изменение высоты бара). После этого вы должны настроить функцию .attr(), чтобы установить высоту бара и т. Д.

Для обработки точек данных, которые исчезают между обновлениями (например, у вас было 10 баров, но теперь только 9), привяжите функции .exit().remove() к барам.

С обоими вышеперечисленными вы можете дополнительно подключить что-то вроде .duration(200).ease('linear'), чтобы все выглядело красиво.

Answer 2

почти все какой @ninjaPixel сказал. Здесь приведен простой пример: http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html