Graphing with bandwidth in D3 v4

Considering this example make one with my own data in V4 version, keeping in mind that many aspects change. But I graph in a single bar and change the axis but not the graphic.

How do I leave my graphic, two different bars and not one, What am I failing, why do I click and print the data if it changes, print the different options.

d3.select("input[value=\"total\"]").property("checked", true);

    datasetTotal = [
        {"label":"Female", "value":18},
        {"label":"Male", "value":82}
    ];

    datasetOptionLondon = [
        {"label":"Female", "value":21},
        {"label":"Male", "value":79}
    ];

    datasetOptionToronto = [
        {"label":"Female", "value":18},
        {"label":"Male", "value":82}
    ];
    datasetOptionVancouver = [
        {"label":"Female", "value":22},
        {"label":"Male", "value":78}
    ];
     datasetOptionMontreal = [
        {"label":"Female", "value":21},
        {"label":"Male", "value":79}
    ];


    d3.selectAll("input").on("change", selectDataset);

    function selectDataset()
    {
        var value = this.value;
        if (value == "total")
        {
            change(datasetTotal);
        }
        else if (value == "CityOne")
        {
            change(datasetOptionLondon);
        }
        else if (value == "CityTwo")
        {
            change(datasetOptionToronto);
        }
        else if (value == "CityThree")
        {
            change(datasetOptionVancouver);
        }
        else if (value == "CityFour")
        {
            change(datasetOptionMontreal);
        }
    };

    var margin = 
    {
        top: (parseInt(d3.select('body').style('height'), 10)/10),
        right: (parseInt(d3.select('body').style('width'), 10)/20), 
        bottom: (parseInt(d3.select('body').style('height'), 10)/10), 
        left: (parseInt(d3.select('body').style('width'), 10)/20)},

     width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right,
      height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom;

    // width = 900 - margin.left - margin.right,

    // height = 500 - margin.top - margin.bottom;


    var x0 = d3.scaleBand()
    .range([0, width])
    .round(0.2);

    var x1 = d3.scaleBand();

    var y = d3.scaleLinear()
            .rangeRound([height, 0]);



    var formatPercent = d3.format("");

    var xAxis = d3.axisBottom(x0);


    var yAxis = d3.axisLeft(y)
                .tickFormat(formatPercent);
    var color = d3.scaleOrdinal()
                .range(["#E8D1FF","#C4F0FF"]);            

    var svg = d3.select("body")
                .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 + ")");

var genderOne = d3.keys(dataset[0]).filter(function(d) 
  { 
    return d.label; 

  });
    // Render x

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
// Cambia

    change(datasetTotal);

    function change(dataset) {


        x0.domain(dataset.map(function(d)
         {
          return d.label; 
        }));
        x1.domain(genderOne)
           .rangeRound([0, x0.bandwidth()]);

        y.domain([0, d3.max(dataset, function(d)
         {
          return d.value;
         })]);




        console.log(dataset);

        // imprimir x nuevo

        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")

                .call(xAxis);

        // deleted the old ones

        svg.select(".y.axis").remove();
        svg.select(".x.axis").remove();


        // ahora y 

        svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("y", 0)
              .attr("dy", "16px")
               .text(" %");

        // labels de la opción

        var bar = svg.selectAll(".bar")
                .data(dataset, function(d) 
                    { 
                        return d.label; 
                    });

        // graficando la nueva data

        bar.enter()
                .append("rect")
                .attr("class", "bar")
                .attr("x", function(d)  { return x1(d.label);})
                .attr("y", function(d) { return y(d.value); })
                .attr("width", x1.bandwidth())

                .attr("height", function(d) { return height - y(d.value); })
                .style("fill", function(d){ return color(d.number); });

      // animaciones


       // removed data:
        bar.exit().remove();
        // updated data:
        bar
                .transition()
                .duration(800)
                .attr("y", function(d) { return y(d.value); })
                .attr("height", function(d) { return height - y(d.value); });



        };

Thanks