D3：基于鼠标悬停更新条形图

Question

我正在尝试制作一个基于鼠标悬停而更改的条形图。我能够生成图表，但里面的值不会改变？我从一个静态数据图表开始，所以我只更新了该系列的一个值。那是变量t。当我打印出值时，它看起来像是基于鼠标悬停而改变，但图表似乎没有根据新数据进行更新。有什么想法吗？

    .on("mouseover", function(d, i) { 

     d3.select("h2 span").text("Airport: " + d.name)
     .append("p").text("City: " + d.city)
     .append("p").text("Flights Count: " + Airport_count[d.iata])
     .append("p").text("Count Cancelled: " + Cancelled_count[d.iata])
     .append("p").text("Percentage Cancelled: " + Math.round((+Cancelled_count[d.iata]) /(+Airport_count[d.iata])*100) + "%");

        d3.select("h3 span").text(d.name);


        // Make a Chart
        var t = +data_series_1[d.iata]["EV"];

        console.log(d.iata);
        console.log(t);


        var data = {
        labels: [
          'Total Flights', 'Cancelled Flights'
         , 'Avg Carrier Delay', 'Avg NSA Delay', 'Avg LateAircraft Delay'
        ],
        series: [
          {
            label: 'American Airlines',
            values: [t,14,22,21,44]


          },
          {
            label: 'Alaskan Airlines',
            values: [22,13,20,24,15]
          },
          {
            label: 'Delta Airlines',
            values: [9,4,1,15,12]
          },]

        // series: [
        //   {
        //     label: "AA",
        //     values: data_series_1[d.origin]["AA"]


        //   },
        // ]



      };


      var chartWidth       = 300,
          barHeight        = 20,
          groupHeight      = barHeight * data.series.length,
          gapBetweenGroups = 10,
          spaceForLabels   = 150,
          spaceForLegend   = 150;

      // Zip the series data together (first values, second values, etc.)
      var zippedData = [];
      for (var i=0; i<data.labels.length; i++) {
        for (var j=0; j<data.series.length; j++) {
          zippedData.push(data.series[j].values[i]);
        }
      }

      // Color scale
      var color = d3.scale.category20();
      var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;

      var x = d3.scale.linear()
          .domain([0, d3.max(zippedData)])
          .range([0, chartWidth]);

      var y = d3.scale.linear()
          .range([chartHeight + gapBetweenGroups, 0]);

      var yAxis = d3.svg.axis()
          .scale(y)
          .tickFormat('')
          .tickSize(0)
          .orient("left");

      // Specify the chart area and dimensions
      var chart = d3.select(".chart")
          .attr("width", spaceForLabels + chartWidth + spaceForLegend)
          .attr("height", chartHeight);

      // Create bars
      var bar = chart.selectAll("g")
          .data(zippedData)
          .enter().append("g")
          .attr("transform", function(d, i) {
            return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
          });

      // Create rectangles of the correct width
      bar.append("rect")
          .attr("fill", function(d,i) { return color(i % data.series.length); })
          .attr("class", "bar")
          .attr("width", x)
          .attr("height", barHeight - 1);

      // Add text label in bar
      bar.append("text")
          .attr("x", function(d) { return x(d) - 3; })
          .attr("y", barHeight / 2)
          .attr("fill", "red")
          .attr("dy", ".35em")
          .text(function(d) { return d; });

      // Draw labels
      bar.append("text")
          .attr("class", "label")
          .attr("x", function(d) { return - 10; })
          .attr("y", groupHeight / 2)
          .attr("dy", ".35em")
          .text(function(d,i) {
            if (i % data.series.length === 0)
              return data.labels[Math.floor(i/data.series.length)];
            else
              return ""});

      chart.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
            .call(yAxis);

      // Draw legend
      var legendRectSize = 18,
          legendSpacing  = 4;

      var legend = chart.selectAll('.legend')
          .data(data.series)
          .enter()
          .append('g')
          .attr('transform', function (d, i) {
              var height = legendRectSize + legendSpacing;
              var offset = -gapBetweenGroups/2;
              var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
              var vert = i * height - offset;
              return 'translate(' + horz + ',' + vert + ')';
          });

      legend.append('rect')
          .attr('width', legendRectSize)
          .attr('height', legendRectSize)
          .style('fill', function (d, i) { return color(i); })
          .style('stroke', function (d, i) { return color(i); });

      legend.append('text')
          .attr('class', 'legend')
          .attr('x', legendRectSize + legendSpacing)
          .attr('y', legendRectSize - legendSpacing)
          .text(function (d) { return d.label; });

        // End of Chart





      })
    ;