更新後にd3js v4が古いデータチャートを削除できない

Question

私のニーズに合った素敵なAlainRoのブロックを変更しました（残念ながら、評判が足りないためリンクできません）。新しいデータを入力します。 There is my codepen。別のexampleでmerge（）を追加しましたが、グラフの整列は整っていますが、古いものは表示されていて、テキスト値は見付かりません。

私はそれに多くの時間を費やし、私はアイデアが不足しています。

コード

barData = [ 
    { index: _.uniqueId(), value: _.random(1, 20) }, 
    { index: _.uniqueId(), value: _.random(1, 20) }, 
    { index: _.uniqueId(), value: _.random(1, 20) } 
]; 

var margin = {top: 20, right: 20, bottom: 50, left: 70}, 
    width = 400 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom, 
    delim = 4; 


var scale = d3.scaleLinear() 
    .domain([0, 21]) 
    .rangeRound([height, 0]); 

var x = d3.scaleLinear() 
    .domain([0, barData.length]) 
    .rangeRound([0, width]); 

var y = d3.scaleLinear() 
    .domain([0, 21]) 
    .rangeRound([height, 0]); 

var svg = d3.select('#chart') 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append('g') 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

svg.append("g") 
    .call(d3.axisLeft(y)); 

function draw() { 
    x.domain([0, barData.length]); 

    var brush = d3.brushY() 
     .extent(function (d, i) { 
      return [[x(i)+ delim/2, 0], 
        [x(i) + x(1) - delim/2, height]];}) 
     .on("brush", brushmove); 

    var svgbrush = svg.selectAll('.brush') 
      .data(barData) 
      .enter() 
      .append('g') 
       .attr('class', 'brush') 
      .append('g') 
       .call(brush) 
       .call(brush.move, function (d){return [d.value, 0].map(scale);}); 

    svgbrush 
     .append('text') 
      .attr('y', function (d){return scale(d.value) + 25;}) 
      .attr('x', function (d, i){return x(i) + x(0.5);}) 
      .attr('dx', '-.60em') 
      .attr('dy', -5) 
      .style('fill', 'white') 
      .text(function (d) {return d3.format('.2')(d.value);}); 

    svgbrush 
     .exit() 
      .append('g') 
       .attr('class', 'brush') 
     .remove(); 

    function brushmove() { 
     if (!d3.event.sourceEvent) return; // Only transition after input. 
     if (!d3.event.selection) return; // Ignore empty selections. 
     if (d3.event.sourceEvent.type === "brush") return; 

     var d0 = d3.event.selection.map(scale.invert); 
     var d = d3.select(this).select('.selection');; 
     var d1 =[d0[0], 0]; 

     d.datum().value = d0[0]; // Change the value of the original data 
     d3.select(this).call(d3.event.target.move, d1.map(scale)); 

     svgbrush 
      .selectAll('text') 
       .attr('y', function (d){return scale(d.value) + 25;}) 
       .text(function (d) {return d3.format('.2')(d.value);}); 

    } 
} 

draw(); 

function upadateChartData() { 
    var newBarsToAdd = document.getElementById('charBarsCount').value; 
    var newBarData = function() { 
     return { index: _.uniqueId(), value: _.random(1, 20) } 
    }; 

    newBarData = _.times(newBarsToAdd, newBarData); 
    barData = _.concat(barData, newBarData) 

    draw(); 
}; 

がありますが、私がトップバーの境界線をドラッグしていたときに、十字ポインタを削除し、サイズを変更のみ残すことも可能ですか？

Answer 1

g要素を2回追加しています。この：

svgbrush.enter() 
    .append('g') 
    .attr('class', 'brush') 
    .merge(svgbrush) 
    .append('g') 
    .call(brush) 
    .call(brush.move, function (d){return [d.value, 0].map(scale);}); 

は次のようになります。ここでは

svgbrush.enter() 
    .append('g') 
    .attr('class', 'brush') 
    .merge(svgbrush) 
    .call(brush) 
    .call(brush.move, function (d){return [d.value, 0].map(scale);}); 

あなたの更新ペンです：http://codepen.io/anon/pen/VmavyX

PS：私もちょうどあなたの入力し、更新を整理するために、いくつかの新しい変数を宣言、他の変更を行いましたテキスト問題の選択と解決。