d3栏char标签转换

Question

我有一个带有标签的条形图。数据刷新标签未正确显示后。不知道我在用newToolTip部件做错了什么。 更新数据后，不会删除标签并保留在画布上。

感谢您的帮助。

//function for button click event 
     function getValue(myDataArray) { 
     document.getElementById('choosenButton').innerHTML = 'chosen data: ' + myDataArray; 
     document.getElementById('choosenButton2').innerHTML = 'chosen data: ' + myDataArray; 

    //Scales pre chart1 set up for various dataarrays 
    var x = d3.scaleBand().domain(d3.range(0, eval(myDataArray).length)) 
     .range([0, svgWidth]) 
     .paddingInner(0.05); 

    var y = d3.scaleLinear() 
     .domain([0,d3.max(eval(myDataArray), function(d) { return (+d.balance)})]) 
     .range([0, svgHeight]); 

    // add the x Axis 
    var xAxis = d3.scaleBand() 
     .domain(eval(myDataArray).map(function(d) { return d.name})) 
     .range([0, svgWidth]) 
     .paddingInner(0.05); 

    //add y axis 
    var yAxis = d3.scaleLinear() 
     .domain([0, d3.max(eval(myDataArray), function(d) { return (+d.balance)})]) 
     .range([svgHeight, 0]); 


    var bars = myCanvas1.selectAll('rect').data(eval(myDataArray)); 
    var newToolTip = myCanvas1.selectAll('g').select('.tooltip').data(eval(myDataArray)); 

     //exit data 
     bars.exit() 
      .transition() 
      .duration(duration1) 
      .attr('height', svgHeight - function(d) { return (+d.balance)}) 
      .remove(); 

     //enter new data 
     bars.enter() 
      .append('rect') 
      .style('fill', 'steelblue') 
      .on('mouseover',mouseover) 
      .on('mouseout', mouseout) 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('width', x.bandwidth()) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance));}) 
      .attr('height', function(d) { return y(+d.balance); }) 
      .merge(bars) 
      .transition() 
      .duration(duration1) //update 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('width', x.bandwidth()) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance)); }) 
      .attr('height', function(d) { return y(+d.balance); }); 

     newToolTip.exit() 
      .transition() 
      .duration(duration1) 
      .remove(); 

     newToolTip.enter() 
      .append('text') 
      .attr('class', 'tooltip') 
      .style('fill', 'red') 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }); 

     newToolTip.attr('x', function(d, i) { return x(i); }) 
      .style('fill', 'green') 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }); 

    myCanvas1.selectAll('g.yaxis') 
      .transition() 
      .duration(duration1) 
      .call(d3.axisLeft(yAxis)); 

    myCanvas1.selectAll('g.xaxis') 
      .transition() 
      .duration(duration1) 
       .call(d3.axisBottom(xAxis)) 
       .selectAll('text') 
       .attr('dx', '-2.2em') 
       .attr('dy', '-.15em') 
       .attr('transform', 'rotate(-65)'); 

    }; 

     function mouseover() { 
     d3.select(this).attr('opacity', .5); 
     }; 

     function mouseout() { 
     d3.select(this).attr('opacity', 1); 
     }; 

Answer 1

这里是工作代码：

var labelsGroup = myCanvas1.append("g") 

    var labels = labelsGroup 
     .selectAll(".tooltip") 
     .data(dataArray1) 
     .enter() 
     .append('text') 
     .attr('class', 'tooltip') 
     .attr('x', function(d, i) { return x(i); }) 
     .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
     .text(function(d) { return +d.balance; }); 

，并点击后，我升级与图表：

var newToolTip = labelsGroup.selectAll('.tooltip').data(eval(myDataArray)); 

     newToolTip.exit() 
      .transition() 
      .duration(duration1) 
      .remove(); 

    newToolTip.enter() 
      .append("text") 
      .attr('class', 'tooltip') 
      .style('fill', 'red') 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }) 
      .style('opacity', 1); 

     newToolTip.attr('x', function(d, i) { return x(i); }) 
      .style('fill', 'green') 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; });