通過將 obervable 轉換為 notebook 到普通 JS 將數據集可視化為 d3 輪廓

Question

我有一個數據集需要使用下面鏈接中的 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,200,288.5
3000,190,287.2
3000,180,295.3
3000,170,304.2
3000,160,315.4
3000,150,326.1
3000,140,363.5
3000,130,403.7
3000,120,484.8
3000,110,646.2
2900,200,280.9
2900,190,283.9
2900,180,286.8
2900,170,294.0
2900,160,302.2
2900,150,317.9
2900,140,349.9
2900,130,415.2
2900,120,525.4
2900,110,621.7
2800,200,278.3
2800,190,282.3
2800,180,285.1
2800,170,291.7
2800,160,298.9
2800,150,316.8
2800,140,350.4
2800,130,397.5
2800,120,458.7
2800,110,583.9
2700,200,277.6
2700,190,278.3
2700,180,284.4
2700,170,288.2
2700,160,292.7
2700,150,308.0
2700,140,327.6
2700,130,359.3
2700,120,440.3
2700,110,615.6
2600,200,277.2
2600,190,277.0
2600,180,280.0
2600,170,283.7
2600,160,294.6
2600,150,308.0
2600,140,325.9
2600,130,360.0
2600,120,421.6
2600,110,598.8
2500,200,273.9
2500,190,274.9
2500,180,278.7
2500,170,283.4
2500,160,291.8
2500,150,301.9
2500,140,319.7
2500,130,349.0
2500,120,414.6
2500,110,595.5
2400,200,273.4
2400,190,274.4
2400,180,277.7
2400,170,280.2
2400,160,285.4
2400,150,299.8
2400,140,314.6
2400,130,336.5
2400,120,387.4
2400,110,541.6
2300,200,273.4
2300,190,277.5
2300,180,274.6
2300,170,277.2
2300,160,284.5
2300,150,295.8
2300,140,307.7
2300,130,334.6
2300,120,380.1
2300,110,521.3
2200,200,270.5
2200,190,271.6
2200,180,273.3
2200,170,274.8
2200,160,282.5
2200,150,289.3
2200,140,302.1
2200,130,323.5
2200,120,368.5
2200,110,507.6
2100,200,270.5
2100,190,268.2
2100,180,269.0
2100,170,271.2
2100,160,277.6
2100,150,285.4
2100,140,299.0
2100,130,320.0
2100,120,366.1
2100,110,503.0
2000,200,271.7
2000,190,268.8
2000,180,268.5
2000,170,273.3
2000,160,278.7
2000,150,285.2
2000,140,295.3
2000,130,317.1
2000,120,361.5
2000,110,486.9

x 和 y 列將用於 x 軸和 y 軸。 Z 列是已經計算的值，我猜這些值需要用於閾值分量。

Answer 1

在我看來，來自 Observable 的示例並沒有太大幫助，因為它的數據結構與您的不同。

無論如何，您可以通過使用以下算法處理數據來構建輪廓（這是很多編碼，但我不能提出更好的方法）：

1. 找到 Z 值的總范圍（最小值/最大值）並將其拆分為多個子范圍（< 200, 200 < 300, ..., 500 < 600, 600 <）。 現在您有一組值 [200,300,400,500,600] 來為每個值構建輪廓
2. 對於每個邊緣值，構建其輪廓如下：

• 遍歷所有 Y 坐標
  • 遍歷所有 Y 值相同的點，找到 Z 值接近邊緣值的點的 X 坐標，收集這些點。
• 通過將收集的點逐個添加來構建輪廓（下一個應該最接近上一個）

3. 為每個輪廓構建一個 SVG 路徑字符串 'M x1,y1 L x2,y2 L x3,y3... L xN,yN Z'
4. 用 <path d="M...Z" fill="value-color" stroke="edge-color" /> 逐一繪制路徑

祝你好運：）