如何解决通过将 obervable 转换为 notebook 到纯 JS,将数据集可视化为 d3 轮廓
我有一个数据集需要使用下面链接中的 d3 等高线图进行可视化
https://observablehq.com/@d3/contours
CSV 文件如下。
x,y,z
3100,200,290.5
3100,190,297.4
3100,180,298.4
3100,170,302.4
3100,160,314.5
3100,150,342.9
3100,140,393.1
3100,130,385.8
3100,120,463.6
3100,110,670.4
3000,288.5
3000,287.2
3000,295.3
3000,304.2
3000,315.4
3000,326.1
3000,363.5
3000,403.7
3000,484.8
3000,646.2
2900,280.9
2900,283.9
2900,286.8
2900,294.0
2900,302.2
2900,317.9
2900,349.9
2900,415.2
2900,525.4
2900,621.7
2800,278.3
2800,282.3
2800,285.1
2800,291.7
2800,298.9
2800,316.8
2800,350.4
2800,397.5
2800,458.7
2800,583.9
2700,277.6
2700,278.3
2700,284.4
2700,288.2
2700,292.7
2700,308.0
2700,327.6
2700,359.3
2700,440.3
2700,615.6
2600,277.2
2600,277.0
2600,280.0
2600,283.7
2600,294.6
2600,308.0
2600,325.9
2600,360.0
2600,421.6
2600,598.8
2500,273.9
2500,274.9
2500,278.7
2500,283.4
2500,291.8
2500,301.9
2500,319.7
2500,349.0
2500,414.6
2500,595.5
2400,273.4
2400,274.4
2400,277.7
2400,280.2
2400,285.4
2400,299.8
2400,314.6
2400,336.5
2400,387.4
2400,541.6
2300,273.4
2300,277.5
2300,274.6
2300,277.2
2300,284.5
2300,295.8
2300,307.7
2300,334.6
2300,380.1
2300,521.3
2200,270.5
2200,271.6
2200,273.3
2200,274.8
2200,282.5
2200,289.3
2200,302.1
2200,323.5
2200,368.5
2200,507.6
2100,270.5
2100,268.2
2100,269.0
2100,271.2
2100,277.6
2100,285.4
2100,299.0
2100,320.0
2100,366.1
2100,503.0
2000,271.7
2000,268.8
2000,268.5
2000,273.3
2000,278.7
2000,285.2
2000,295.3
2000,317.1
2000,361.5
2000,486.9
x 和 y 列用于 x 轴和 y 轴。 Z列是已经计算出来的值,我猜这些值需要用于阈值组件。
解决方法
在我看来,来自 Observable 的样本没有太大帮助,因为它的数据结构与你的不同。
无论如何,您可以通过使用以下算法处理数据来构建轮廓(需要大量编码,但我无法提出更好的方法):
- 找到 Z 值的总范围(最小值/最大值)并将其拆分为多个子范围(
- 对于每个边缘值,按如下方式构建其轮廓:
- 遍历所有 Y 坐标
- 遍历所有具有相同 Y 值的点,找到 Z 值接近边缘值的点的 X 坐标,收集这些点。
- 通过将收集到的点一个接一个地添加来构建轮廓(下一个应该与前一个最接近)
- 为每个轮廓构建一个 SVG 路径字符串 'M x1,y1 L x2,y2 L x3,y3 ... L xN,yN Z'
- 用
祝你好运:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。