Javascript 使用不同的数据集更新条形图无效

我正在尝试使用D3.js创建条形图。我最初的要求是根据一组数据创建条形图。每次我按下这里的按钮，它都应该改变

现在将更新第二个数据集的值，但条形图的顺序不会因第二个数据集的不同而改变。请注意，我不想直接排序。相反，我想根据新的数据集更新这些值

var sortBars = function () {
iteration_number = iteration_number + 1;
//alert(iteration_number);
sortOrder = !sortOrder;

sortItems = function (a, b) {
    if (sortOrder) {
        return a.value - b.value;
    }
    return b.value - a.value;
};
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset1.length))
    .rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset1, function (d) {
    return d.value;
})])
    .range([0, h]);

svg.selectAll("rect")

    .data(dataset1, key)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
    return xScale(i);
})
    .attr("y", function (d) {
    return h - yScale(d.value);
})
    .attr("width", xScale.rangeBand())
    .attr("height", function (d) {
    return yScale(d.value);
})
    .attr("transform", function (d, i) {
    return "translate(" + [0, d] + ")"
})
    .attr("fill", function (d) {
    return "rgb(0, 0, " + (d.value * 10) + ")";
})

//Tooltip
.on("mouseover", function (d) {
    //Get this bar's x/y values, then augment for the tooltip
    var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
    var yPosition = parseFloat(d3.select(this).attr("y")) + 14;

    //Update Tooltip Position & value
    d3.select("#tooltip")
        .style("left", xPosition + "px")
        .style("top", yPosition + "px")
        .select("#value")
        .text(d.value);
    d3.select("#tooltip").classed("hidden", false)
})
    .on("mouseout", function () {
    //Remove the tooltip
    d3.select("#tooltip").classed("hidden", true);
})
    .transition()
    .delay(function (d, i) {
    return i * 50;
})
    .duration(1000)
    .attr("x", function (d, i) {
    return xScale(i);
});

svg.selectAll('text')
    .data(dataset1, key)
    .enter()
    .append("text")
    .text(function (d) {
    return d.value;
})
    .attr("text-anchor", "middle")
    .attr("x", function (d, i) {
    return xScale(i) + xScale.rangeBand() / 2;
})
    .attr("y", function (d) {
    return h - yScale(d.value) + 14;
})
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");
};

我现在可以更改值了。但我希望这个变化看起来像是在这个图表中交换条形图。但事实并非如此

---

有人能给我一些线索吗？有人能给我一些线索吗？