javascript - 如何在反应中显示网络拓扑和状态？

Question

我想在本地网络中显示网络设备（即计算机、交换机等及其连接和比特率）。

对于这样的简单示例（实际上问题可能有更多设备和连接）：

Computer A ----\ 3kb/sec    Computer C
                \          /
                 Switch --/ 4kb/sec
                 /
Computer B -----/ 1kb/sec

我有设备图标、链接状态和比特率值，但我不知道如何在反应项目中有效地显示和管理这些。在第一次尝试中，我<svg>静态地在 HTML 标记中绘制每个设备和链接（即在特定坐标中绘制每个设备......）。

import React from 'react';

const renderInput = (line, idx) => {
	let l = line.points.reduce(
		(prev, next) =>
			(prev.x && prev.y ? 'M' + prev.x + ',' + prev.y : prev) + ' L' + next.x + ',' + next.y
	);

	return [
		<text
			key={'input-caption'}
			x={line.points[0].x + 3}
			y={line.points[0].y - 3}
			fill={line.caption.fill}
			style={line.caption.style}
		>
			{line.caption.text}
		</text>,
		<defs key={`arrow-${idx}`}>
			<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="3" refY="6" orient="auto">
				<path d="M2,4 L2,8 L5,6 L2,4" style={{ fill: '#2dc408' }} />
			</marker>
		</defs>,
		<path
			key={`line-${idx}`}
			d={l}
			style={{
				stroke: '#2dc408',
				strokeWidth: '2px',
				fill: 'none',
				// markerStart: "url(#markerCircle)",
				markerEnd: 'url(#markerArrow)'
			}}
		/>
	];
};

const renderInputs = inputs => {
	const result = inputs.map((line, idx) => renderInput(line, idx));
	return result;
};

const Asset = ({ asset, inputs }) => {
	const renderedInputs = renderInputs(inputs);

	return [
		renderedInputs,
		<image
			key={'logo-img'}
			href={asset.icon}
			x={asset.logo.location.x}
			y={asset.logo.location.y}
			height={asset.logo.size.height}
			width={asset.logo.size.width}
		/>,
		<text
			key={'asset-name'}
			x={asset.caption.location.x}
			y={asset.caption.location.y}
			fill={asset.caption.fill}
			style={asset.caption.style}
		>
			{asset.caption.text}
		</text>
	];
};

export default Asset;

正如您在上面的代码中看到的那样，我在道具中获取设备位置和名称，并在asset道具中获取其链接以将input其绘制在屏幕上。

这种方法存在以下问题。

1. 结果没有响应
2. 它不灵活（即，用户无法缩放/取消缩放或扩展/取消扩展网络拓扑以获得所需的视图）
3. 管理设备和链接是一项繁琐的工作

标签： javascriptreactjs