如何使用 d3-contour 绘制简单的 2D 等高线图？

Question

假设我有一个 4 x 5 的数字数组，我只想在 D3 中制作一个 2D 等高线图。

例如

数据=[[0.01,0.012,0.034,0.024],[0.01,0.012,0.034,0.024],[0.01,0.012,0.034,0.024],[0.01,0.012,0.034,0.024],[0.01 , 0.012, 0.034, 0.024]];

我想要这样的东西吗？

我举了很多例子都没有成功。

甚至无法使此处的示例运行 https://github.com/d3/d3-contour

Answer 1

您需要将数据作为简单数组传递，而不是多维数组：

const data = [0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024];

然后，您在轮廓生成器本身中定义宽度和高度（在您的例子中为 4 和 5）：

.size([4, 5])

另外，您需要设置足够的阈值。这是一个使用 4x5 数据的简单演示：

const data = [0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024, 0.01, 0.012, 0.034, 0.024];
const width = 4,
  height = 5,
  thresholds = 5;
const extent = d3.extent(data);
const contours = d3.contours()
  .size([width, height])
  .thresholds(d3.range(extent[0], extent[1], (extent[1] - extent[0]) / thresholds));
const contoursData = contours(data);
const projection = d3.geoIdentity()
  .fitSize([300, 150], contoursData[0]);
const path = d3.geoPath()
  .projection(projection);
const svg = d3.select("body").append("svg");
const paths = svg.selectAll(null)
  .data(contoursData)
  .enter()
  .append("path")
  .attr("d", path);

path {
  fill: wheat;
  stroke: black;
  stroke-width: 1;
}

<script src="https://d3js.org/d3.v7.min.js"></script>

如何使用 d3-contour 绘制简单的 2D 等高线图？

How to do a simple 2D contour plot using d3-contour?

javascript

d3.js