Javascript D3:Y轴打印赢得'；t使用新数据更新

我正在使用D3库，我只有一个Y轴，当我的新数据更新时，我只想更新它。当滑块更改数字时，新数据将被更新，并且工作正常。问题是，新轴打印在旧轴上。我需要删除旧的明显和新的取代它时，数据发生变化。非常感谢您在这方面的帮助，谢谢

<script type="text/javascript">

       var myYear = 2006;

        //Width and height
        var w = 1000;
        var h = 500;
        var barPadding = 20;

     var myNames = ["Pedestrian", "Bicycle", "Motorbike", "Car", "Other"];


        //Original data
        var dataset = [
            [
                { y: 20 },   //male 
                { y: 4 },
                { y: 16},
                { y: 53},
                { y: 15 }
            ],
            [
                { y: 12 },   //female
                {  y: 4 },
                {  y: 3 },
                {  y: 36 },
                {  y: 2 }
            ],

        ];
        console.log(dataset);


        //Set up stack method
        var stack = d3.layout.stack();

        //Data, stacked
        stack(dataset);

        //Set up scales
        var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset[0].length))
            .rangeRoundBands([30, w], 0.05);



        var yScale = d3.scale.linear()
            .domain([0,             
                d3.max(dataset, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                })
            ])
            .range([0, h]);


         yScale2 = d3.scale.linear()        //for Y axis
            .domain([0,             
                d3.max(dataset, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                })
            ])
            .range([h-10, 0]);





        //Easy colors accessible via a 10-step ordinal scale
    //  var colors = d3.scale.category20c();

        var color = d3.scale.ordinal()
  .domain(["Male", "Female"])
  .range(["#00B2EE", "#FF69B4"]);



        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);



        // Add a group for each row of data
        var groups = svg.selectAll("g")
            .data(dataset)
            .enter()
            .append("g")
            .style("fill", function(d, i) {
                return color(i);
            });



        //Define X axis
        var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(5);

        //Define Y axis
        var yAxis = d3.svg.axis()
                          .scale(yScale2)
                          .orient("left")
                          .ticks(5);



        // Add a rect for each data value
        groups.selectAll("rect")
            .data(function(d) { return d; })
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                return xScale(i)
            })

            .attr("width", xScale.rangeBand())


           .attr("y", function(d) {
                return  h - yScale(d.y0) - yScale(d.y) -20
           })

           .attr("height", function(d) {
                return  yScale(d.y)
           })


        .on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip

            d3.select(this)
            .attr("stroke", "white")
            .attr("stroke-width", "3px")

            var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;                 var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

        //Update the tooltip position and value
        d3.select("#tooltip")
        .style("left", xPosition + "px")
        .style("top", yPosition + "px")
        .select(".deathCount")
        .text(d.y);


            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
        })


          .on("mouseout", function(d) {

    //Hide the tooltip
              d3.select("#tooltip").classed("hidden", true); 
            d3.select(this)
            .transition()
            .duration(2000)
            .attr("stroke", "none")
          //  .attr("fill", "rgb(0, 0, " + (d * 1) + ")");

          });






/////////   MOUSE CLICK TO CHANGE DATA  //////////////////////////////



        function data2012() {
           dataset = [
            [
                { y: 20 },   //male 
                { y: 4 },
                { y: 16},
                { y: 53},
                { y: 15 }
            ],
            [
                { y: 12 },   //female
                {  y: 4 },
                {  y: 3 },
                {  y: 36 },
                {  y: 2 }
            ],

        ];
        }




        function data2011() {
            dataset =   [
            [
                { y: 33 },   //male 
                { y: 9 },
                { y: 17},
                { y: 57},
                { y: 14 }
            ],
            [
                { y: 14 },   //female
                {  y: 0 },
                {  y: 1 },
                {  y: 38 },
                {  y: 3 }
            ],

        ]; 
        }

           function data2010() {
            dataset =   [
            [
                { y: 26 },   //male 
                { y: 7 },
                { y: 25},
                { y: 106},
                { y: 18 }
            ],
            [
                { y: 14 },   //female
                {  y: 0 },
                {  y: 0 },
                {  y: 40 },
                {  y: 2 }
            ],

        ]; 
        }

           function data2009() {
            dataset =   [
            [
                { y: 31 },   //male 
                { y: 11 },
                { y: 28},
                { y: 102},
                { y: 27 }
            ],
            [
                { y: 17 },   //female
                {  y: 2 },
                {  y: 1 },
                {  y: 55 },
                {  y: 0 }
            ],

        ]; 
        }



      function updateData() {  



    // RE-SET SCALES AND LAYOUT

          d3.select("g").selectAll("svg").remove();

        //Data, stacked
        stack(dataset);

        //Set up scales
         xScale = d3.scale.ordinal()
            .domain(d3.range(dataset[0].length))
            .rangeRoundBands([30, w], 0.05);

         yScale = d3.scale.linear()
            .domain([0,             
                d3.max(dataset, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                })
            ])
            .range([0, h]);



  //    d3.selectAll(yAxis).remove();      //new stuff  

              groups = svg.selectAll("g")
            .data(dataset)


                //Update all rects
        var gas = groups.selectAll("rect")
        .data(function(d) {return d;});

              gas
              .exit
              .remove;

            gas
                .transition()
                .duration(750)
                .ease("linear")
                .attr("width", xScale.rangeBand())

              .attr("y", function(d) {
                return  h - yScale(d.y0) - yScale(d.y) - 20
           })

           .attr("height", function(d) {
                return  yScale(d.y)
           })
        .attr("x", function(d, i) {
            return xScale(i);
        });




        //   d3.select(yAxis).remove();
            //REDRAW Y AXIS

             yScale2 = d3.scale.linear()
            .domain([0,             
                d3.max(dataset, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                })
            ])
            .range([h-10, 0]);




                yAxis = d3.svg.axis() 
                          .scale(yScale2)
                          .orient("left")
                          .ticks(5);

            svg.append("g")

            .attr("class", "axis")
            .attr("transform", "translate(" + 30  + ",-10)")
            .transition()
            .duration(500)

            .call(yAxis)



      }


       //SLIDER STUFF

xAxis = d3.svg.axis() 
                          .scale(xScale) 
                          .orient("bottom")
                          .ticks(5)
                        .tickFormat(function(d) {

                return  myNames[d];

            });


        //Create Y axis

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + 30 + ",-10)")
        //    .call(yAxis);

               svg.append("g")

            .attr("class", "axis")

            .attr("transform", "translate(0," + (h - barPadding ) + ")")

            .transition()
            .duration(500)
            .call(xAxis)



    </script>




    <script> //Jquery slider


 $(function() {
$( "#slider" ).slider({
 value:2012,
  min: 2009,
  max: 2012,
  step: 1,
  slide: function( event, ui ) {
    $( "#amount" ).val(  ui.value );

      myYear = ui.value;
      console.log(myYear);

      if (myYear == 2012){
          data2012();

      }

     if (myYear == 2011){
          data2011();

      }


       if (myYear == 2010){
          data2010();

      }

       if (myYear == 2009){
          data2009();

      }

        updateData();




    //  console.log(myYear);
  }

});

var myYear=2006年；
//宽度和高度
var w=1000；
var h=500；
var=20；
var myNames=[“行人”、“自行车”、“摩托车”、“汽车”、“其他”]；
//原始数据
变量数据集=[
[
{y:20}，//男性
{y:4}，
{y:16}，
{y:53}，
{y:15}
],
[
{y:12}，//女性
{y:4}，
{y:3}，
{y:36}，
{y:2}
],
];
console.log（数据集）；
//设置堆栈方法
var stack=d3.layout.stack（）；
//数据，堆叠
堆栈（数据集）；
//设置天平
var xScale=d3.scale.ordinal（）
.domain（d3.range（数据集[0]。长度））
.范围圆带（[30，w]，0.05）；
var yScale=d3.scale.linear（）
.domain（[0，
d3.max（数据集，函数（d）{
返回d3.max（d，函数（d）{
返回d.y0+d.y；
});
})
])
.范围（[0，h]）；
yScale2=d3.scale.linear（）//用于Y轴
.domain（[0，
d3.max（数据集，函数（d）{
返回d3.max（d，函数（d）{
返回d.y0+d.y；
});
})
])
.范围（[h-10，0]）；
//通过10步序数刻度轻松获取颜色
//var colors=d3.scale.category20c（）；
var color=d3.scale.ordinal（）
.domain（[“男性”、“女性”]）
.范围（[“#00B2EE”、“#FF69B4”]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//为每行数据添加一个组
var groups=svg.selectAll（“g”）
.数据（数据集）
.输入（）
.附加（“g”）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
//定义X轴
var xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.蜱（5）；
//定义Y轴
var yAxis=d3.svg.axis（）
.比例（yScale2）
.东方（“左”）
.蜱（5）；
//为每个数据值添加一个rect
groups.selectAll（“rect”）
.data（函数（d）{return d；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回xScale（i）
})
.attr（“宽度”，xScale.rangeBand（））
.attr（“y”，函数（d）{
返回h-yScale（d.y0）-yScale（d.y）-20
})
.attr（“高度”，功能（d）{
返回y刻度（d.y）
})
.on（“鼠标悬停”，功能（d）{
//获取此栏的x/y值，然后为工具提示进行增强
d3.选择（本）
.attr（“笔划”、“白色”）
.attr（“笔划宽度”，“3px”）
var xPosition=parseFloat（d3.select（this.attr）（“x”）+xScale.rangeBand（）/2；var yPosition=parseFloat（d3.select（this.attr）（“y”）/2+h/2；
//更新工具提示位置和值
d3.选择（“工具提示”）
.style（“左”，xPosition+“px”）
.样式（“顶部”，Y位置+“px”）
.选择（“.死亡计数”）
.文本（d.y）；
//显示工具提示
d3.选择（“#工具提示”）.classed（“隐藏”，false）；
})
.开启（“鼠标出”，功能（d）{
//隐藏工具提示
d3.选择（“#工具提示”）.classed（“隐藏”，true）；
d3.选择（本）
.transition（）
.期限（2000年）
.attr（“笔划”、“无”）
//.attr（“填充”，“rgb（0,0，+（d*1）+”）；
});
/////////鼠标单击以更改数据//////////////////////////////
函数data2012（）{
数据集=[
[
{y:20}，//男性
{y:4}，
{y:16}，
{y:53}，
{y:15}
],
[
{y:12}，//女性
{y:4}，
{y:3}，
{y:36}，
{y:2}
],
];
}
函数data2011（）{
数据集=[
[
{y:33}，//男性
{y:9}，
{y:17}，
{y:57}，
{y:14}
],
[
{y:14}，//女性
{y:0}，
{y:1}，
{y:38}，
{y:3}
],
]; 
}
函数data2010（）{
数据集=[
[
{y:26}，//男性
{y:7}，
{y:25}，
{y:106}，
{y:18}
],
[
{y:14}，//女性
{y:0}，
{y:0}，
{y:40}，
{y:2}
],
]; 
}
函数data2009（）{
数据集=[
[
{y:31}，//男性
{y:11}，
{y:28}，
function updateData(){

    ...

    yScale2 = d3.scale.linear()
        .domain([0,
          d3.max(dataset, function(d) {
            return d3.max(d, function(d) {
              return d.y0 + d.y;
            });
          })
        ])
        .range([h - 10, 0]);

    // set scale
    yAxis.scale(yScale2);
    // redraw it
    d3.select('.yaxis').call(yAxis);
}