我正在處理一個小的 D3.js 圖，如果單擊了父較大的節點，我想隱藏連接的較小的節點。到目前為止，我嘗試了幾種方法，然后先過濾鏈接以接收源節點可能是我最好的嘗試。
不幸的是我收到了newLinks.map is not a function error，要么我完全誤解了地圖功能，要么只是錯過了最后的平靜。
function onClick(event, d) {
const newLinks = link.filter(link => link.target.id === d.id);
console.log(newLinks)
const newNodes = newLinks.map(link => data.nodes.find(newNode => newNode.id === link.source.id))
console.log(newNodes)
}
問題： 我怎樣才能實作我所追求的？如果單擊父節點，我想隱藏較小的附加節點。
var svg = d3.select("body").append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
var data = {
"nodes": [{
"id": "A",
"type": "parent"
},
{
"id": "B",
"type": "parent"
},
{
"id": "C",
"type": "child"
},
{
"id": "D",
"type": "child"
},
{
"id": "E",
"type": "child"
},
],
"links": [{
"source": "A",
"target": "B",
"distance": 125
},
{
"source": "C",
"target": "A",
"distance": 20
},
{
"source": "D",
"target": "A",
"distance": 20
},
{
"source": "E",
"target": "B",
"distance": 20
},
]
}
var force = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id
}).distance(function(d) {
return d.distance
}))
.force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
.force("charge", d3.forceManyBody().strength(-1000))
.force("collision", d3.forceCollide().radius(setSize))
var linksContainer = svg.append("g").attr("class", "linksContainer")
var nodesContainer = svg.append("g").attr("class", "nodesContainer")
initialize()
function initialize() {
link = linksContainer.selectAll("line")
.data(data.links)
.join("line")
.attr("class", "line")
node = nodesContainer.selectAll(".node")
.data(data.nodes, d => d.id)
.join("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
node.selectAll("circle")
.data(d => [d])
.join("circle")
.attr("r", setSize)
.on("click", onClick)
force
.nodes(data.nodes)
.on("tick", ticked)
force
.force("link")
.links(data.links)
}
function setSize(d) {
switch (d.type) {
case "parent":
return 40
case "child":
return 20
default:
return 40
}
}
function onClick(event, d) {
const newLinks = link.filter(link => link.target.id === d.id);
console.log(newLinks)
const newNodes = newLinks.map(link => data.nodes.find(newNode => newNode.id === link.source.id))
console.log(newNodes)
}
function ticked() {
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 ")";
});
}
function dragStarted(event, d) {
if (!event.active) force.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragEnded(event, d) {
if (!event.active) force.alphaTarget(0);
d.fx = undefined;
d.fy = undefined;
}body {
overflow: hidden;
background: #e6e7ee;
margin: 0;
}
circle {
fill: whitesmoke;
stroke: black;
}
line {
stroke: black;
}<script src="https://d3js.org/d3.v7.js"></script>uj5u.com熱心網友回復：
您需要了解資料陣列和 d3 選擇之間的區別。在你的代碼，link并且node是代表圓和線D3的選擇。它們不是底層資料的表示。
但是，它們確實提供了一些在這種情況下有用的功能。例如，您可以使用.each(...)而不是forEach回圈遍歷元素，或者.data()獲取 d3 選擇表示為陣列的物件，因此link.data().map絕對是一個有效的函式。
我通過向isVisible每個節點或鏈接添加一個決定可見性的屬性來實作你想要的。然而，這絕對不是最好的或唯一的方法，所以請隨意探索替代方法。
var svg = d3.select("body").append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
var data = {
"nodes": [{
"id": "A",
"type": "parent"
},
{
"id": "B",
"type": "parent"
},
{
"id": "C",
"type": "child"
},
{
"id": "D",
"type": "child"
},
{
"id": "E",
"type": "child"
},
],
"links": [{
"source": "A",
"target": "B",
"distance": 125
},
{
"source": "C",
"target": "A",
"distance": 20
},
{
"source": "D",
"target": "A",
"distance": 20
},
{
"source": "E",
"target": "B",
"distance": 20
},
]
}
var force = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id
}).distance(function(d) {
return d.distance
}))
.force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
.force("charge", d3.forceManyBody().strength(-1000))
.force("collision", d3.forceCollide().radius(setSize))
var linksContainer = svg.append("g").attr("class", "linksContainer")
var nodesContainer = svg.append("g").attr("class", "nodesContainer")
initialize()
function initialize() {
const links = data.links
.filter(link => link.isVisible !== false);
const nodes = data.nodes.filter(node =>
node.isVisible !== false);
link = linksContainer.selectAll("line")
.data(links)
.join("line")
.attr("class", "line")
node = nodesContainer.selectAll(".node")
.data(nodes, d => d.id)
.join("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
node.selectAll("circle")
.data(d => [d])
.join("circle")
.attr("r", setSize)
.on("click", onClick)
force
.nodes(nodes)
.on("tick", ticked)
force
.force("link")
.links(links)
}
function setSize(d) {
switch (d.type) {
case "parent":
return 40
case "child":
return 20
default:
return 40
}
}
function onClick(event, d) {
link.data()
.forEach(link => {
link.isVisible = link.target.id === d.id;
});
const visibleNodeIds = [
d.id,
...link.data()
.filter(l => l.isVisible)
.map(l => l.source.id)
];
node.data()
.forEach(node => {
node.isVisible = visibleNodeIds.includes(node.id);
});
initialize();
}
function ticked() {
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 ")";
});
}
function dragStarted(event, d) {
if (!event.active) force.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragEnded(event, d) {
if (!event.active) force.alphaTarget(0);
d.fx = undefined;
d.fy = undefined;
}body {
overflow: hidden;
background: #e6e7ee;
margin: 0;
}
circle {
fill: whitesmoke;
stroke: black;
}
line {
stroke: black;
}<script src="https://d3js.org/d3.v7.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/370620.html
標籤：javascript d3.js