D3 条形字符标签过渡

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