Динамическое изменение непрозрачности ссылок и узлов в графе силы d3 на основе фильтра радиокнопки

Question

У меня есть a jsfiddle here. Когда выбран переключатель фильтра, я хочу, чтобы он динамически изменял непрозрачность элементов и ссылок на основе их рейтинга (объекты узла имеют свойство rating с целым значением).

Может просто не использовать OnChange/OnClick благодаря функции будучи вложенными

Когда я связать функцию JS к OnChange или OnClick метод для радиокнопок, он не может найти потому что он находится внутри блока d3.json(){}; (в примере данные разделены, чтобы заставить его работать на скрипке, но эта строка закомментирована). Если я не помещаю функцию внутри этого блока, у нее нет доступа к ссылкам и узлам, но если она находится внутри, то onchange/onclick ее не может найти. Я не могу вызывать вложенную функцию со стороны html, так как она выходит за рамки.

Невозможно добавить в качестве атрибута к существующим кнопкам ввода радио (не работает)

Затем я попытался динамически добавлять OnChange и OnClick событий (я попробовал оба пути) к входу со стороны JS но это, похоже, не работает (возможно, я сделал это неправильно).

Как это сделать?

Я попытался получить № 1 для работы ниже, но я фактически застрял на # 1, что заставляет меня думать, что я приближаюсь к проблеме неправильно. Должен быть другой способ сделать это.

1. Рисунок, как вызвать функцию внутри d3.json(){} блока, когда onchange или onclick событие вызывается с помощью кнопки радио.

2. Определите, как изменить непрозрачность узлов и ссылок на основе их данных.

This аналогичная проблема, но нет ни одного примера, так что я не могу видеть, как его применять. I do имеют поле для фильтрации в моих объектах узла, но не могут понять, как это сделать динамически в ответ на выбор переключателя.

Answer 1

Просто создайте ссылку на переменные, которые вас интересуют в области вне вашего обратного вызова .json. В данном случае это, вероятно, link и node:

var link, node; 
d3.json('map2.json', function(error, graph) { 

    ... 

    link = container.append("g") 
    .attr("class", "links") 

    ... 

    node = container.append("g") 
    .attr("class", "nodes") 

    ... 

}); 

Вы можете использовать их ваше событие изменения ваших радиокнопок:

d3.selectAll("input[name=filter]").on("change", function(d){ 

    // value of selected radio 
    var value = this.value; 
    // everybody 
    node.style("opacity", 1); 
    // those that aren't dim 
    if (value !== "all"){ 
    value = +this.value; 
    node.filter(function(d){ 
     return d.rating != value; 
    }) 
    .style("opacity", "0.5"); 
    } 

}); 

---

Запуск кода here.