如果您想在 JavaScript 中绘制等值线图，可以使用 D3.js 或 Plotly.js 等 JavaScript 绘图库。
D3.js 是一个流行的可视化库，它可以帮助您创建各种类型的图表，包括等值线图。您可以使用 D3.js 创建 SVG 元素并将其用于绘制等值线。以下是一个简单的示例：
```js
const data = [
[0, 0, 5],
[1, 0, 10],
[2, 0, 15],
[0, 1, 20],
[1, 1, 25],
[2, 1, 30],
[0, 2, 35],
[1, 2, 40],
[2, 2, 45]
];
const width = 500;
const height = 500;
const x = d3.scaleLinear()
.domain([0, 2])
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, 2])
.range([height, 0]);
const z = d3.scaleLinear()
.domain([0, 45])
.range(['white', 'blue']);
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.selectAll('path')
.data(d3.contours()
.size([3, 3])
.thresholds(d3.range(5).map(i => i * 10))
(data.map(d => d[2]))
)
.enter().append('path')
.attr('d', d3.geoPath(d3.geoIdentity().scale(width / 3)))
.attr('fill', d => z(d.value));
```
这里，我们使用 `d3.contours()` 创建等值线，然后使用 `d3.geoPath()` 将其转换为 SVG 路径。我们还使用 `d3.scaleLinear()` 创建比例尺，将值映射到坐标和颜色。
如果您更喜欢 Plotly.js，可以使用 `contour` trace 创建等值线图。以下是一个示例：
```js
const data = [
[0, 0, 5],
[1, 0, 10],
[2, 0, 15],
[0, 1, 20],
[1, 1, 25],
[2, 1, 30],
[0, 2, 35],
[1, 2, 40],
[2, 2, 45]
];
const x = data.map(d => d[0]);
const y = data.map(d => d[1]);
const z = data.map(d => d[2]);
const trace = {
x: x,
y: y,
z: z,
type: 'contour',
contours: {
start: 0,
end: 45,
size: 5
}
};
const layout = {
width: 500,
height: 500,
margin: { t: 0, r: 0, b: 0, l: 0 }
};
Plotly.newPlot('myDiv', [trace], layout);
```
这里，我们使用 `contour` trace 创建等值线，并设置起始值、结束值和间隔。我们还使用 `Plotly.newPlot()` 创建图表，将数据和布局传递给它。
无论您选择使用哪个库，都可以使用 JavaScript 创建等值线图。
2292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
