d3js v4无法删除更新后的旧数据图表

我已经修改了不错的AlainRo的Block for我的需要（不幸的是无法链接到它，因为没有足够的信誉），我无法删除旧数据图表后输入新数据。 There is my codepen。在另一个example我已经添加merge（），并且图表很好地对齐，但旧的仍然可见并且文本值被遗漏。d3js v4无法删除更新后的旧数据图表

我花了很多时间在上面，而且我没有想法。

有代码

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(); 
};

是否也可以去除交叉指针，只留下调整，当我拖着顶部栏边框？

来源

2016-11-12 ksh

您正在追加g元素两次。这：

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：我也做了修改，宣布一些新的变量，只是组织你的输入和更新选择和解决文本问题。

来源

2016-11-12 03:46:09

d3js v4无法删除更新后的旧数据图表

回答

相关问题