Question

我在同一页面上有两个d3柱形图（#salesChart和#bonusChart）。在它们上方是一个按钮 <button id="sortSalesAscending">Sort Sales Ascending</button> 只对销售图表进行排序。按钮旁边是“未选中”复选框<input id="linkChartsCheckbox" type="checkbox"> Link Charts<br>。

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

（我意识到这个功能在这样的隔离中是没有意义的，但它是一组更大的图表的一部分，这些图表将被链接或不链接）。

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

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)";
            });
    });

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

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 * 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)";
            });
    });

我宁愿不使用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...
    }
}

这种工作曾经有过一次，但后来我解开了一些东西而失去了它。此外，除非首先检查/取消选中按钮，否则该按钮根本不起作用。我错过了什么？谢谢！

Answer 1

我需要将选中/取消选中的复选框与按钮的if / else语句分开。谢谢@Orry Vandermeulen在那个方向上轻推。此外，我不需要为复选框的状态设置全局var。我可以这样检查if ($('#linkChartsCheckbox').is(':checked')) {...

$('#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)";
                });             
        }
    });

d3通过复选框更改按钮功能

1 个答案: