我正在嘗試創建一個 d3 力圖，其中每個節點都是兩個同心圓。我只用一個圓圈就可以毫無問題地做到這一點。我不明白我必須將兩個圓圈中的每一個分組，但我不確定我做錯了什么。
這是我的代碼的樣子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Force Graph</title>
<script src="d3.v5.9.7.js"></script>
</head>
<body>
<div id="viz"></div>
<script>
// Utils
function createLinksArray(agentNodes) {
const n = agentNodes.length;
let linksArray = [];
agentNodes.map((agent, i) => {
linksArray.push({ source: 0, target: i 1, weight: agent.packetsIn agent.packetsOut, ...agent })
})
return linksArray;
}
// Constants ---
const forceManyBody = -1000;
const distance = 140;
const styles = {
switch: {
size: 60,
fill: '#bbb',
strokeColor: 'green',
strokeWidth: 4
},
agent: {
size: 25,
fill: 'white',
strokeColor: '#bbb',
strokeWidth: 2
}
}
const linkStyles = {
onlineColor: 'green',
offlineColor: 'gray',
strokeWidth: 2,
}
// Chart container dimensions ---
let svgWidth = 600, svgHeight = 600;
// Main SVG container ---
let svg = d3.select('#viz')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.append('g');
// Data binding ---
d3.json('data.json').then(data => {
// Format data structure ---
const switchNode = {
d3id: 0,
type: 'switch',
name: data.selectedSwitch.sdmcSwitch.instanceName
};
const agentsNodes = data.agentsState.rates.agentsRates.map((x, i) => ({ d3id: i 1, type: 'agent', name: x.agentName, ...x }));
let NODES = [switchNode, ...agentsNodes];
let LINKS = createLinksArray(agentsNodes);
// Scale domain and range
const linkWeightScale = d3.scaleLinear()
.domain([0, d3.max(LINKS.map(link => link.weight))])
.range([1, 10]);
// SVGs creation ---
const linkSvg = svg
.selectAll('path')
.data(LINKS)
.enter()
.append('path')
.attr('stroke', linkStyles.onlineColor)
.attr('stroke-width', d => linkWeightScale(d.weight));
let nodeSvg2 = svg
.selectAll('g')
.data(NODES)
.enter()
.append('g');
nodeSvg2
.append('circle')
.attr('r', d => styles[d.type].size)
.style('fill', d => styles[d.type].fill);
nodeSvg2
.append('circle')
.attr('r', d => styles[d.type].size*0.9)
.attr('fill', 'green')
.attr('stroke', 'black');
const textSvg = svg
.selectAll("text")
.data(NODES)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.style('font-size', 20)
.style('font-family', 'sans-serif')
.text((node) => node.name);
// Set up graph simulation ---
const simulation = d3.forceSimulation(NODES)
.force("charge", d3.forceManyBody().strength(forceManyBody))
.force("link", d3.forceLink(LINKS).id(d => d.d3id).distance(distance))
.force("center", d3.forceCenter(svgWidth / 2, svgHeight / 2));
simulation.on("tick", () => {
nodeSvg2
.attr("cx", d => d.x).attr("cy", d => d.y);
linkSvg
.attr("d", d => d3.line()([
[d.source.x, d.source.y],
[d.target.x, d.target.y]
]));
textSvg
.attr('x', d => d.x).attr('y', d => d.y);
})
});
</script>
</body>
</html>
截圖顯示發生了什么，所有圓圈都堆在 (0,0) 發生了什么？
uj5u.com熱心網友回復：
nodeSvg2 是一個組，因此您需要提供轉換/翻譯。
nodeSvg2
.attr('transform', d => 'translate(' d.x ',' d.y ')')
在cx和cy屬性將不組元素上作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/359427.html
標籤：d3.js
上一篇：UWP（Windows10應用程式）InkCanvasLoadAsync錯誤HRESULTE_FAIL已從對COM組件的呼叫回傳