使用单选按钮显示/隐藏内容

Question

我有 JSON 格式的数据，我正在尝试使用 D3.js 将其可视化。我想让用户选择他们在哪个图表中查看数据。我尝试在两者之间进行平滑过渡，但没有成功，所以我决定只使用单选按钮。这是我得到的：

$(document).ready(function () {
    if ($("input[name='chart']:checked").val() == 'pie') {
        // ... Graph 1
    } else if ($("input[name='chart']:checked").val() == 'bar') {
        // ... Graph 2
    }
});

JSFIDDLE

这显示了加载时选中其单选按钮的图表。但是，当我单击按钮时，它们不会改变。我做了一些研究，发现我可能需要包含 change() 函数。这是我尝试过的：

$(document).ready(function () {
    $("input[name=chart]:radio").change(function () {
        if ($("#chart1Pie").attr("checked")) {
            // ... Graph 1
        } else if ($("#chart1Bar").attr("checked")) {
            // ... Graph 2
        }
    });
});

JSFIDDLE

这有一些问题。 1) 加载页面时不加载所选图表。 2) 单击单选按钮时，仅显示饼图。 3）当另一个单选按钮被点击时，之前的图表不会消失；它只是把新的放在它下面。

我查看了几个 StackOverflow 问题，但没有一个能解决问题。有人可以帮我吗？谢谢！

Answer 1

要让它发挥作用，你需要做 3 件事。

1：在进入第一个条件之前，这样做：

$('#chart').empty();

2: 而不是 :

if ($("#chart1Pie").attr("checked"))

做：

 if ($("#chart1Pie").is(":checked"))

3：在声明.change()函数后，插入：

$('input:radio:first').trigger('change');

它会触发它并显示一个图表。

小提琴：http://jsfiddle.net/k3WJN/13/