任何人都可以幫我嘗試通過復選框型別過濾這些資料（節點和鏈接）而不觸及不透明度，但每次都在節點和鏈接上進行更新請我嘗試了幾種方法但無法改變任何東西？在這段代碼中，我設法通過更改不透明度來過濾它們，但我想要的是洗掉它們并每次添加它們而不改變節點和鏈接的顏色。
這是我的 HTML/CSS/JS 檔案：
<style>
.link {
stroke: #ccc;
stroke-width: 1.5px;
fill:transparent;
}
</style>
<body>
<div>
<input type="checkbox" value="Application Server" id="applicationServer" name="check" checked>
<label for="applicationServer">Application Server</label>
</div>
<div>
<input type="checkbox" value="Access Switch" id="acessSwitch" name="check" checked>
<label for="acessSwitch">Access Switch</label>
</div>
<div>
<input type="checkbox" value="Distribution Switch" id="distSwitch" name="check" checked>
<label for="distSwitch">Distribution Switch</label>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 1060,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scale.category20();
var force = d3.layout.force()
.gravity(0.05)
.distance(60)
.charge(-100)
.size([width, height]);
d3.json("data2.json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
var circles = node.append("circle")
.attr("r", 8)
.attr("fill", function(d) { return color(d.group); });
d3.selectAll("input[name=check]").on("change", function() {
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i ) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i].defaultValue);
}
}
return checkboxesChecked.length > 0 ? checkboxesChecked : " ";
}
var checkedBoxes = getCheckedBoxes("check");
node.style("opacity", 1);
link.style("opacity", 1);
node.filter(function(d) {
return checkedBoxes.indexOf(d.role) === -1;
})
.style("opacity", "0");
link.filter(function(d) {
return checkedBoxes.indexOf(d.source.type) === -1 &&
checkedBoxes.indexOf(d.target.type) === -1;
})
.style("opacity", "0.2");
link.filter(function(d) {
return checkedBoxes.indexOf(d.source.type) > -1 &&
checkedBoxes.indexOf(d.target.type) > -1;
})
.style("opacity", "0.2");
});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" d.x "," d.y ")"; });
});
});
</script>
這是 json 檔案“data2.json”：
{"nodes": [
{"id": 1, "name": "Beric", "role": "Application Server", "group": 2},
{"id": 2, "name": "dmi01-stamford-sw01", "role": "Access Switch", "group": 5},
{"id": 4, "name": "ncsu118-distswitch1", "role": "Distribution Switch", "group": 6},
{"id": 8, "name": "ncsu128-distswitch1", "role": "Distribution Switch", "group": 6}
],
"links": [
{"source": 1, "target": 2},
{"source": 4, "target": 8}, {"source": 4, "target": 2}
]}
請幫忙 ！！！
uj5u.com熱心網友回復：
每次更新復選框時，您可以為每個節點計算一個布林值，以根據其角色和活動復選框確定它是否應該處于活動狀態：
document.getElementsByName("check").forEach(checkbox => {
data.nodes.filter(n => n.role === checkbox.value).forEach(n => n.active = checkbox.checked);
});
然后根據此活動屬性過濾節點和鏈接：
var activeNodes = data.nodes.filter(n => n.active);
var activeLinks = data.links.filter(l => activeNodes.includes(l.source) && activeNodes.includes(l.target));
然后使用 d3 和一般更新模式更新圖形。
您可以在這里找到一個作業示例：https ://codepen.io/ccasenove/pen/YzLJEmK
當您收到資料時，您應該修改鏈接，使它們指向真實的節點物件而不是它們的 id，因為強制布局需要它。之后，您可以像更改復選框時一樣更新圖表：
d3.json("data2.json", function (error, json) {
if (error) throw error;
data = json;
data.links.forEach(l => {
l.source = data.nodes.find(n => n.id == l.source);
l.target = data.nodes.find(n => n.id == l.target);
});
updateGraph();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/513936.html
下一篇：拖動圓圈和相應的反應文本標簽