D3.js - <a href="http://jsfiddle.net/kiniadit/dsmxtonL/" rel="nofollow">http://jsfiddle.net/kiniadit/dsmxtonL/</a></p> <p>특정 코드 - - 잘못

Question

여기에 종료 DOM 텍스트 내 코드입니다 내가 클릭 할 때 제대로 SVG 텍스트 요소를 제거 할 수없는 오전

var labels = svg.selectAll("text").data(dataset) 
        //Enter… 
         labels.enter() 
         .append("text") 
         .text(function(d) { 
          return d; 
         }) 
         .attr("text-anchor", "middle") 
         .attr("x", w) 
         .attr("y", function(d) { 
          return h - yScale(d) + 14; 
         }) 
         .attr("font-family", "sans-serif") 
         .attr("font-size", "11px") 
         .attr("fill", "black"); 

        //Update… 
      labels 
       .attr("x", function(d, i) { 
       return xScale(i) + xScale.rangeBand()/2; 
       }); 

      //Exit… 
      labels.exit() 
       .remove(); 

은 "데이터 값을 제거" 절. 다른 DOM 요소 (svg rects)는 원래대로 종료되지만 svg 텍스트 요소는 이상한 방식으로 삭제됩니다. 첫 번째 데이터 값 대신에 마지막 데이터 값이 제거됩니다.

이 코드는 키 - 값 객체 대신 일반 배열을 사용한다는 점을 제외하면 Scott Murray의 저서 http://examples.oreilly.com/0636920026938/chapter_09/29_dynamic_labels.html과 거의 똑같은 사본입니다.

제가 빠진 것이 있으면 알려주세요. 감사!

// Create bars 
svg.selectAll("rect").data(dataset, key) 

당신은 아주 쉽게 키를 생성 할 수 있습니다 : 예에서이 데이터를 조인 인용

Answer 1

참고는 key가 사용하고 있습니다. 다음은 달성하려는 목표를 달성하는 데 도움이되는 샘플입니다.

var length = dataset.length; 

var key = function (d) { return d; }; 

var computeJoin = function() { 
    return svg.selectAll('rect').data(dataset, key); 
} 

var shiftDataset = function() { 
    dataset.shift() 
    newItem.index = length; /* this index is unique */ 
    dataset.push(newItem) 
    length = dataset.length; /* keep the length up to date */ 
} 

var update = function() { 
    labels = computeJoin(); /* join */ 

    /* enter, update, etc... */ 

    /* shift the data */ 
    shiftDataset() 
    labels = join(dataset); 
    labels.exit().remove(); 
} 

/* init */ 
for (var i = 0; i < length; i++) { 
    dataset[i].index = i; 
} 

/* update every 2000ms */ 
var DELAY = 2000; 
setInterval(update, DELAY); 

Answer 2

x 값과 y 값 계산에 간단한 오류가 있다고 생각합니다. 일부 x 및 y 값을 올바르게 계산하여 업데이트했습니다. 괜찮습니다. 여기를보세요.

fiddle

는

.attr("fill", "black"); //update text label color to black 
... 
dataset[i] = Math.floor(Math.random()*100) + 14; // add 14 here as minum height of bars  

는 희망이 도움이, 난 당신 예를 몇 가지 스타일을 변경, 그것은 분명 확인하십시오. :-D