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/

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

1 个答案: