차트가 제대로 업데이트되지 않습니다.

Question

차트를 동적으로 업데이트하는 방법을 이해하기 위해 d3js (http://mbostock.github.io/d3/tutorial/bar-2.html)에 대한 Mike Bostock의 자습서를 따르려고하지만 몇 가지 장애물이 있습니다. 내 차트에서

는 단순히 제거되는 것보다 왼쪽에 내 바는, 내 차트 뒤에 전송되고 왜 알아낼 수 없습니다 :

다음

var t = 1297110663, // start time (seconds since epoch) 
      v = 70, // start value (subscribers) 
      data = d3.range(33).map(next); // starting dataset 

      function next() { 
      return { 
       time: ++t, 
       value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) 
      }; 
      } 

      setInterval(function(){ 
      data.shift(); 
      data.push(next()); 
      console.log(data); 
      redraw(); 
      }, 1000); 

      var w = 20, 
       h =80; 

      var x = d3.scale.linear() 
        .domain([0, 1]) 
        .range([0, w]); 
      var y = d3.scale.linear() 
        .domain([0, 100]) 
        .rangeRound([0, h]); 

      var chart = d3.select(".container").append("svg") 
       .attr("class", "chart") 
       .attr("width", w * data.length - 1) 
       .attr("height", h); 

      chart.selectAll("rect") 
      .data(data) 
      .enter().append("rect") 
      .attr("x", function(d, i){ return x(i) - 0.5; }) 
      .attr("y", function(d) { return h - y(d.value) - .5; }) 
      .attr("width", w) 
      .attr("height", function(d) { return y(d.value); }); 

      function redraw(){ 
      console.log(data); 
      var rect = chart.selectAll('rect') 
       .data(data, function(d){ return d.time; }); 

      rect.enter().insert("rect") 
       .attr("x", function(d, i) { return x(i + 1) - .5; }) 
       .attr("y", function(d) { return h - y(d.value) - .5; }) 
       .attr("width", w) 
       .attr("height", function(d) { return y(d.value); }) 

      rect.transition() // Shouldn't I use .update() here? 
       .duration(1000) 
       .attr("x", function(d, i) { return x(i) - .5; }); 

      rect.exit().transition() 
       .duration(1000) 
       .attr('x', function(d, i) { return x(i - 1) - .5}) 
       .remove(); 
      } 

가 있습니다 :

JS jsfiddle : http://jsfiddle.net/kkMR4/

내가 이해하지 못하는 또 다른 이유는 우리가 .update()를 사용하지 않는 이유입니다. 내가 정확히 이해한다면 .enter()는 DOM 요소를 생성하는데 사용되는데, 데이터가 DOM에서 일치하는 것을 찾지 못했고 .exit()가 데이터에없는 DOM 요소를 찾는 데 사용되므로 업데이트를 사용해서는 안된다.) 다른 모든 열을 왼쪽으로 이동하려면?

많은 감사

베스트

Answer 1

문제점이 블록이다

가

 rect.exit().transition() 
      .duration(1000) 
      .attr('x', function(d, i) { return x(i - 1) - .5}) 
      .remove(); 

번째 라인 (.attr)는, 좌표를 재 할당한다. 정말로 종료하려는 경우이 행을 삭제할 수 있습니다.

 rect.exit().transition() 
      .duration(1000) 
      .remove();