Использование кнопок радиосвязи для отображения/скрытия содержимого

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'); 

это вызовет его и показать график.

Fiddle: http://jsfiddle.net/k3WJN/13/