Javascript d3带复选框的按钮更改功能

我在同一页上有两个d3柱状图（

#salesChart

和

#bonusChart

）。上面有一个按钮

销售升序排序

这只会对销售图表进行排序。按钮旁边是一个“未选中”复选框

链接图表

我想要的是，当复选框被选中时，随后单击按钮将对两个图表进行排序。然后，如果未选中，则随后单击该按钮将再次恢复为仅对销售图表进行排序。选中/取消选中复选框的操作不应使按钮“运行”，它只会更改该按钮在单击时应该运行的代码

（我意识到这种功能在这样孤立的情况下没有意义，但它是一组更大的图表的一部分，所有图表都将链接或不链接）

以下是仅对销售图表进行排序的按钮代码。这很有效

d3.select("#sortSalesAscending")
    .on("click", function() {
        d3.selectAll("#salesChart g.bar").sort(function(a, b) {
                return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
            })
            .transition()
            .delay(function(d, i) {
                return i * sortDelay;
            })
            .duration(sortDuration)
            .attr("transform", function(d, i) {
                return "translate(" + xScale(i) + ",0)";
            });
    });

下面是对两个图表进行排序的代码。这是可行的（销售图表和奖金图表都按销售数据排序）

我不想使用jQuery，但在使用纯JS失败后，我求助于它。这是我的逻辑

$('#linkChartsCheckbox').change(function(){
    cb = $(this);
    cb.val(cb.prop('checked'));
    var foo = $(this).val();
    if ( foo === true ) {
        ...put code for sorting both graphs here... 
    } else {
        ...put code for sorting only first graph here...
    }
}

---

这种方法曾经奏效过，但后来我把东西拆开丢了。此外，除非先选中/取消选中按钮一次，否则该按钮根本无法工作。我错过了什么？谢谢

我需要将选中/未选中的复选框与按钮的if/else语句分开。感谢@Orry Vandermeulen朝那个方向推动。此外，我不需要为复选框的状态设置全局

var

。如果（$（'linkChartsCheckbox'）.is（'：checked'）{…，我可以用这种方式检查

if（$（'linkChartsCheckbox'））{…

$('#linkChartsCheckbox').change(function(){
    cb = $(this);
    cb.val(cb.prop('checked'));}
})

d3.select("#sortSalesAscending")            
    .on("click", function() {
        if ($('#linkChartsCheckbox').is(':checked')) {
            d3.selectAll("#salesChart g.bar").sort(function(a, b) {
                    return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });
            d3.selectAll("#bonusChart g.bar").sort(function(a, b) {
                        return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });
        } else {
            d3.selectAll("#salesChart g.bar").sort(function(a, b) {
                    return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * sortDelay;
                })
                .duration(sortDuration)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });             
        }
    });

---

是否希望在按钮单击事件上或单击复选框时进行排序？单击按钮时，复选框的状态（“选中”或“未选中”）将更改按钮单击时运行的代码。将在问题中澄清。谢谢。

$('#linkChartsCheckbox').change(function(){
    cb = $(this);
    cb.val(cb.prop('checked'));}
})

d3.select("#sortSalesAscending")            
    .on("click", function() {
        if ($('#linkChartsCheckbox').is(':checked')) {
            d3.selectAll("#salesChart g.bar").sort(function(a, b) {
                    return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });
            d3.selectAll("#bonusChart g.bar").sort(function(a, b) {
                        return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });
        } else {
            d3.selectAll("#salesChart g.bar").sort(function(a, b) {
                    return d3.ascending(a.sales, b.sales) || d3.ascending(a.name, b.name);
                })
                .transition()
                .delay(function(d, i) {
                    return i * sortDelay;
                })
                .duration(sortDuration)
                .attr("transform", function(d, i) {
                    return "translate(" + xScale(i) + ",0)";
                });             
        }
    });