D3.JS-Kraftsimulation: Einige Kanten rendern nicht bei Doppelklick-Erweiterung ⇐ JavaScript

[Anonymous]

Ich erstelle eine Topologie -Visualisierung mit D3.Js, bei der Knoten durch mehrere Kanten verbunden sind. Ich habe eine Funktion implementiert, um einen "erweiterten" Status an einer Gruppe von Kanten durch Doppelklicken umzuschalten, der einen Offset auf die Kantenpfade anwendet (unter Verwendung von D3.curvecatMullrom mit einem Alpha von 0,3), damit mehrere Kanten zwischen demselben Knotenpaar als separate Kurven sichtbar werden. (Zum Beispiel zwischen "50a_1_ems" und "3000a_1_ems") ist nur eine Kante sichtbar, während die andere verborgen bleibt, obwohl zwei Kanten existieren. Oben.linkGroup
.selectAll("g.link-group")
.filter((d) => linkGroupState.get(d.key))
.raise();
< /code>
und < /p>
function ticked() {
// 엣지 그룹 업데이트: 선 경로 및 라벨 위치 계산
linkGroup.selectAll("g.link-group").each(function (d) {
const source = d.source;
const target = d.target;
const dx = target.x - source.x;
const dy = target.y - source.y;

// 기본 중간점(노드 중심)
const centerX = (source.x + target.x) / 2;
const centerY = (source.y + target.y) / 2;

// expanded 상태라면 오프셋을 적용하여 곡선의 중간점 계산
let midX = centerX;
let midY = centerY;
const expanded = linkGroupState.get(d.key) || false;
if (expanded) {
const offsetFactor = 20;
const offset = (d.linkIndex - (d.totalLinks - 1) / 2) * offsetFactor;
const norm = Math.sqrt(dx * dx + dy * dy);
if (norm !== 0) {
const px = -dy / norm;
const py = dx / norm;
midX += px * offset;
midY += py * offset;
}
}

const lineGenerator = d3.line().curve(d3.curveCatmullRom.alpha(0.3));
const coords = [
[source.x, source.y],
[midX, midY],
[target.x, target.y],
];
const pathData = lineGenerator(coords);

// 여기서 디버깅용으로 pathData 출력
console.log(
"DEBUG pathData:",
d.key,
"linkIndex:",
d.linkIndex,
pathData
);

d3.select(this).select("path.link-visible").attr("d", pathData);
d3.select(this).select("path.link-hit").attr("d", pathData);
d3.select(this)
.select("g.link-label-group")
.attr("transform", `translate(${centerX}, ${centerY})`);
});

// 노드 위치 업데이트
nodeGroup
.selectAll("g")
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);

updateVisibleNodes();

// 여기서 엣지 라벨 위치 업데이트 추가
edgeLabelLayer.selectAll("g.link-label-group").each(function (d) {
const centerX = (d.source.x + d.target.x) / 2;
const centerY = (d.source.y + d.target.y) / 2;
// linkGroupState에 저장된 상태(true: expanded, false: collapsed)
const isExpanded = linkGroupState.get(d.key) || false;
d3.select(this)
.attr("transform", `translate(${centerX}, ${centerY})`)
.style("display", isExpanded ? "none" : "block"); // expanded 상태면 숨김
});

// 4) 속도 라벨(각 링크별) 위치 + 표시 여부
edgeSpeedLayer.selectAll("g.link-speed-label").each(function (d) {
console.log(
"Speed label:",
d,
"isExpanded:",
linkGroupState.get(d.key)
);
const centerX = (d.source.x + d.target.x) / 2;
const centerY = (d.source.y + d.target.y) / 2;
const isExpanded = linkGroupState.get(d.key) || false;

d3.select(this)
.attr("transform", `translate(${centerX}, ${centerY})`)
.style("display", isExpanded ? "block" : "none") // 펼쳐졌으면 보이기
.select("text.speed-label-text")
.text(d.eth_speed ? d.eth_speed + "G" : "");
// eth_speed가 있다면 "1G", "10G" 등 표시
});
linkGroup.lower();
nodeGroup.raise();
linkGroup
.selectAll("g.link-group")
.filter((d) => linkGroupState.get(d.key))
.raise();
// 디버깅용: DOM 순서 로그 출력
const order = linkGroup
.selectAll("g.link-group")
.nodes()
.map((node) => node.__data__.key);
console.log("현재 link-group 순서:", order);
}
< /code>
Ich log das berechnete SVG -Pfaddaten (PathData), Tasten und LinkIndex -Werte ab. Die PathData -Ausgänge (z. B. M905.596,254,625C ...) erscheinen normal und es gibt keine Nan- oder Infinity -Werte. Schlüssel. Dies kann dazu führen, dass der Doppelklick-Umschalter alle Kanten gleichzeitig beeinflusst. Stellen Sie sicher, dass alle Kanten bei Doppelklick-Erweiterung sichtbar werden?
Vielen Dank im Voraus!