Мой график основан на этом этом примере.
Здесь я создаю различные узлы в зависимости от типа. Я также рисую параметры фильтра для этого графа на основе этих типов динамически, так как эти типы также могут увеличиваться позже и не жестко закодированы. На данный момент я просто заново перерисовываю график, удаляя выбранный фильтр.
// This function sets up the filters on top of the svg based off on the number of types
function drawArtifactFilters(artifactTypes) {
let filtersDiv = $('#filters');
let newElement;
for (let index = 0; index < artifactTypes.length; index++) {
if (artifactTypes[index] !== "agent") {
newElement = "<input type=\"checkbox\" id=\"" + artifactTypes[index] + "\" name=\"filter\" value=\"" + artifactTypes[index] + "\" checked=\"checked\"/> <label for=\"" + artifactTypes[index] + "\" class=\"radioLabel\"><span class=\"checkbox-labels\">" + artifactTypes[index] + "<div class=\"circleBase\" style='background-color: "+ fillArtifacts(index) +" '></div></span></label> \n";
filtersDiv.append(newElement);
}
}
}
// Calls function to redraw topology map based on the filters selected
$(document).on("change", "input[name='filter']", function () {
selectFilters()
});
function selectFilters() {
let selectedFilters = [];
d3.selectAll("input[name=filter]").each(function (d) {
selectedCheckBoxes = d3.select(this);
if (selectedCheckBoxes.property("checked")) {
selectedFilters.push(selectedCheckBoxes.property("value"));
}
});
getTopologyData(selectedFilters); //This is a function where the data is manipulated according to the types selected and the whole graph is redrawn.
}
Фильтры, которые у меня есть, всегда проверяются по умолчанию, и при снятии флажка я просто хочу удалить узлы и ссылки. этого конкретного типа вместо полной перерисовки карты.