1

我有 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 问题，但没有一个能解决问题。有人可以帮我吗？谢谢！

4

1 回答 1

3

你有 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/

于 2013-06-19T15:22:54.320 回答