d3.js - 使用 D3 创建等高线/极坐标图-6ren

d3.js - 使用 D3 创建等高线/极坐标图

转载作者：行者123 更新时间：2023-12-04 03:35:20

使用 D3，我想创建一个像这样的极坐标图 figure .

在 volcano example 之后, 我可以得到轮廓 correctly rendered .

如何将等高线平移到圆上以创建极坐标图？

更新:

我使用的初始数据是一个二维数组，其中第一维 (array[n]) 代表周期，第二维 (array[n][0]) 代表力量。请参阅下面的数据示例和我用来绘制等高线图的代码。

function draw(spectrumData: Swell["spectrum"]): void {
    if (!spectrumData) {
      console.warn("spectrumData is undefined");
      return;
    }

    const { spectrum, width, height } = transformSpectrum(spectrumData);
    const sizeFactor = 13;

    const svg = d3
      .select("#spectrum-contour")
      .attr("width", width * sizeFactor)
      .attr("height", height * sizeFactor);

    // Ret the contour size
    var contour = d3Contour.contours().size([width, height]);

    // Returns "rgb(x, y, z)"
    const interpolator = (t: number): string => {
      const i0 = d3Hsv.interpolateHsvLong(
        d3Hsv.hsv(240, 0.77, 0.73),
        d3Hsv.hsv(114, 0.77, 0.73)
      );

      const i1 = d3Hsv.interpolateHsvLong(
        d3Hsv.hsv(114, 0.77, 0.73),
        d3Hsv.hsv(0, 0.77, 0.73)
      );
      return t < 0.2 ? i0(t * 2) : i1((t - 0.2) * 2);
    };

    const colorScale = d3Scale
      .scaleSequential(interpolator)
      // extent returns [min, max]
      .domain(d3.extent(spectrum));

    const path: any = d3Geo.geoPath(
      d3Geo.geoIdentity().scale((width * sizeFactor) / width)
    );

    // draw the contours
    svg
      .selectAll("path")
      .data(contour(spectrum))
      .enter()
      .append("path")
      .attr("d", (feature) => path(feature))
      .attr("fill", (d) => colorScale(d.value));
}

// Transform the 2D spectrum array to a 1D array
// and replace negative values with zeros.
function transformSpectrum(data: Swell["spectrum"]): TransformedSpectrum {
  const array1d = ([] as number[]).concat.apply([], data);
  return {
    width: data[0].length,
    height: data.length,
    spectrum: array1d.map((i) => (i >= 0 ? i : 0)),
  };
}

"spectrum": [
          [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 ],
          [ 0.0002, 0.0003, 0.0003, 0.0003, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0003, 0.0003, 0.0003, 0.0003, 0.0002, 0.0002, 0.0002, 0.0002, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0002, 0.0002, 0.0002, 0.0003, 0.0003, 0.0003, 0.0004, 0.0004, 0.0005, 0.0005, 0.0006, 0.0006, 0.0007, 0.0007, 0.0007 ],
          [ 0.0001, 0.0001, 0.0002, 0.0002, 0.0003, 0.0003, 0.0004, 0.0004, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0005, 0.0005, 0.0005, 0.0006, 0.0006, 0.0007, 0.0007, 0.0007, 0.0008, 0.0008 ],
          [ 0.0003, 0.0003, 0.0002, 0.0002, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0002, 0.0002, 0.0003, 0.0004, 0.0005, 0.0006, 0.0007, 0.0009, 0.001, 0.0011, 0.0013, 0.0014, 0.0015, 0.0016, 0.0017, 0.0018, 0.0018, 0.0018, 0.0019, 0.0018, 0.0018, 0.0018, 0.0017, 0.0016, 0.0015, 0.0014, 0.0013, 0.0011, 0.001, 0.0008, 0.0007 ],
          [ 0.0007, 0.0007, 0.0006, 0.0006, 0.0006, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0005, 0.0006, 0.0006, 0.0007, 0.0008, 0.0009, 0.001, 0.0011, 0.0012, 0.0013, 0.0015, 0.0016, 0.0016, 0.0017, 0.0018, 0.0018, 0.0019, 0.0019, 0.0018, 0.0018, 0.0018, 0.0017, 0.0016, 0.0015, 0.0014, 0.0012, 0.0011, 0.001, 0.0008 ],
          [ 0.0007, 0.0006, 0.0005, 0.0004, 0.0004, 0.0003, 0.0002, 0.0002, 0.0002, 0.0002, 0.0002, 0.0002, 0.0003, 0.0004, 0.0005, 0.0006, 0.0007, 0.0008, 0.001, 0.0012, 0.0013, 0.0015, 0.0017, 0.0018, 0.002, 0.0021, 0.0022, 0.0023, 0.0023, 0.0023, 0.0024, 0.0023, 0.0023, 0.0022, 0.0021, 0.002, 0.0019, 0.0017, 0.0016, 0.0014 ],
          [ 0.0001, 0.0001, 0.0002, 0.0002, 0.0003, 0.0004, 0.0006, 0.0007, 0.0009, 0.0011, 0.0013, 0.0016, 0.0018, 0.0021, 0.0023, 0.0026, 0.0029, 0.0032, 0.0034, 0.0037, 0.0039, 0.0041, 0.0042, 0.0044, 0.0045, 0.0045, 0.0046, 0.0046, 0.0045, 0.0044, 0.0043, 0.0042, 0.004, 0.0038, 0.0036, 0.0034, 0.0031, 0.0029, 0.0026, 0.0024 ],
          [ 0.0014, 0.001, 0.0006, 0.0003, 0.0, -0.0002, -0.0003, -0.0003, -0.0001, 0.0003, 0.0008, 0.0015, 0.0024, 0.0035, 0.0047, 0.0061, 0.0076, 0.0092, 0.0109, 0.0126, 0.0143, 0.016, 0.0175, 0.019, 0.0203, 0.0214, 0.0224, 0.023, 0.0235, 0.0236, 0.0235, 0.0231, 0.0224, 0.0215, 0.0204, 0.019, 0.0175, 0.0158, 0.014, 0.0122 ],
          [ 0.0036, 0.0023, 0.0009, -0.0005, -0.0019, -0.0033, -0.0045, -0.0054, -0.006, -0.0062, -0.0061, -0.0054, -0.0043, -0.0027, -0.0005, 0.0021, 0.0052, 0.0086, 0.0124, 0.0165, 0.0207, 0.0251, 0.0294, 0.0336, 0.0376, 0.0413, 0.0447, 0.0475, 0.0498, 0.0516, 0.0526, 0.0531, 0.0528, 0.0519, 0.0503, 0.0481, 0.0453, 0.0421, 0.0385, 0.0345 ],
          [ 0.0031, 0.0022, 0.0013, 0.0003, -0.0008, -0.0018, -0.0027, -0.0035, -0.0041, -0.0045, -0.0046, -0.0044, -0.0039, -0.0029, -0.0016, 0.0, 0.002, 0.0043, 0.0069, 0.0098, 0.0128, 0.0159, 0.0191, 0.0222, 0.0253, 0.0282, 0.0309, 0.0333, 0.0353, 0.0369, 0.038, 0.0387, 0.0389, 0.0386, 0.0378, 0.0366, 0.0349, 0.0328, 0.0304, 0.0277 ],
          [ 0.001, -0.0001, -0.0012, -0.0022, -0.0032, -0.0039, -0.0045, -0.0047, -0.0047, -0.0044, -0.0038, -0.0027, -0.0014, 0.0003, 0.0022, 0.0044, 0.0069, 0.0095, 0.0122, 0.015, 0.0177, 0.0204, 0.0229, 0.0252, 0.0272, 0.0289, 0.0302, 0.0311, 0.0316, 0.0316, 0.0312, 0.0303, 0.029, 0.0274, 0.0254, 0.0231, 0.0205, 0.0178, 0.015, 0.0121 ],
          [ -0.0002, -0.0006, -0.001, -0.0014, -0.0017, -0.0019, -0.002, -0.0019, -0.0018, -0.0015, -0.0011, -0.0005, 0.0001, 0.0009, 0.0019, 0.0029, 0.0039, 0.0051, 0.0062, 0.0073, 0.0085, 0.0095, 0.0105, 0.0114, 0.0121, 0.0127, 0.0131, 0.0134, 0.0135, 0.0134, 0.0131, 0.0126, 0.012, 0.0113, 0.0104, 0.0094, 0.0084, 0.0072, 0.0061, 0.005 ],
          [ 0.0003, 0.0, -0.0004, -0.0007, -0.001, -0.0013, -0.0015, -0.0016, -0.0016, -0.0015, -0.0012, -0.0009, -0.0004, 0.0002, 0.0009, 0.0017, 0.0026, 0.0035, 0.0045, 0.0056, 0.0067, 0.0077, 0.0087, 0.0096, 0.0105, 0.0112, 0.0119, 0.0123, 0.0127, 0.0128, 0.0128, 0.0127, 0.0124, 0.0119, 0.0113, 0.0105, 0.0097, 0.0088, 0.0078, 0.0067 ],
          [ -0.0003, -0.0004, -0.0005, -0.0005, -0.0005, -0.0005, -0.0004, -0.0003, -0.0002, 0.0, 0.0002, 0.0005, 0.0008, 0.0011, 0.0014, 0.0018, 0.0021, 0.0025, 0.0028, 0.0032, 0.0035, 0.0038, 0.004, 0.0042, 0.0044, 0.0045, 0.0046, 0.0046, 0.0046, 0.0045, 0.0044, 0.0042, 0.004, 0.0037, 0.0035, 0.0032, 0.0028, 0.0025, 0.0022, 0.0019 ],
          [ -0.0004, -0.0006, -0.0008, -0.0009, -0.001, -0.0011, -0.0011, -0.001, -0.0009, -0.0007, -0.0004, -0.0001, 0.0003, 0.0008, 0.0013, 0.0019, 0.0024, 0.003, 0.0036, 0.0042, 0.0048, 0.0053, 0.0057, 0.0062, 0.0065, 0.0067, 0.0069, 0.007, 0.007, 0.0069, 0.0067, 0.0064, 0.0061, 0.0057, 0.0052, 0.0047, 0.0041, 0.0036, 0.003, 0.0024 ],
          [ -0.0001, -0.0002, -0.0004, -0.0005, -0.0006, -0.0007, -0.0007, -0.0007, -0.0007, -0.0006, -0.0005, -0.0003, -0.0001, 0.0002, 0.0005, 0.0009, 0.0013, 0.0017, 0.0021, 0.0026, 0.003, 0.0034, 0.0038, 0.0042, 0.0045, 0.0048, 0.005, 0.0051, 0.0052, 0.0053, 0.0052, 0.0051, 0.005, 0.0048, 0.0045, 0.0042, 0.0038, 0.0034, 0.003, 0.0026 ],
          [ -0.0003, -0.0003, -0.0003, -0.0003, -0.0003, -0.0002, -0.0002, -0.0001, 0.0, 0.0001, 0.0002, 0.0004, 0.0005, 0.0007, 0.0009, 0.0011, 0.0013, 0.0015, 0.0017, 0.0018, 0.002, 0.0021, 0.0023, 0.0024, 0.0025, 0.0025, 0.0025, 0.0026, 0.0025, 0.0025, 0.0024, 0.0023, 0.0022, 0.0021, 0.002, 0.0018, 0.0017, 0.0015, 0.0014, 0.0012 ],
          [ -0.0002, -0.0002, -0.0002, -0.0001, -0.0001, -0.0001, 0.0, 0.0, 0.0001, 0.0002, 0.0002, 0.0003, 0.0004, 0.0005, 0.0006, 0.0007, 0.0008, 0.0008, 0.0009, 0.001, 0.0011, 0.0011, 0.0011, 0.0012, 0.0012, 0.0012, 0.0012, 0.0012, 0.0011, 0.0011, 0.0011, 0.001, 0.001, 0.0009, 0.0008, 0.0008, 0.0007, 0.0006, 0.0006, 0.0005 ],
          [ -0.0001, -0.0001, -0.0002, -0.0001, -0.0001, -0.0001, -0.0001, 0.0, 0.0, 0.0001, 0.0002, 0.0002, 0.0003, 0.0004, 0.0005, 0.0006, 0.0007, 0.0008, 0.0009, 0.001, 0.0011, 0.0011, 0.0012, 0.0012, 0.0013, 0.0013, 0.0013, 0.0013, 0.0012, 0.0012, 0.0012, 0.0011, 0.0011, 0.001, 0.0009, 0.0008, 0.0008, 0.0007, 0.0006, 0.0005 ],
          [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0001, 0.0001, 0.0002, 0.0002, 0.0003, 0.0003, 0.0004, 0.0005, 0.0006, 0.0006, 0.0007, 0.0008, 0.0009, 0.001, 0.0011, 0.0011, 0.0012, 0.0013, 0.0013, 0.0014, 0.0014, 0.0014, 0.0014, 0.0015, 0.0014, 0.0014, 0.0014, 0.0014, 0.0013, 0.0013, 0.0012, 0.0012, 0.0011, 0.001, 0.0009 ],
          [ -0.0002, -0.0002, -0.0002, -0.0002, -0.0002, -0.0001, -0.0001, -0.0001, 0.0, 0.0001, 0.0002, 0.0002, 0.0003, 0.0004, 0.0005, 0.0007, 0.0008, 0.0009, 0.001, 0.0011, 0.0011, 0.0012, 0.0013, 0.0013, 0.0014, 0.0014, 0.0014, 0.0014, 0.0013, 0.0013, 0.0012, 0.0012, 0.0011, 0.001, 0.0009, 0.0008, 0.0007, 0.0006, 0.0005, 0.0005 ],
          [ 0.0002, 0.0002, 0.0002, 0.0001, 0.0001, 0.0, 0.0, 0.0, -0.0001, -0.0001, -0.0001, -0.0001, -0.0001, -0.0001, -0.0001, -0.0001, 0.0, 0.0001, 0.0001, 0.0002, 0.0004, 0.0005, 0.0006, 0.0007, 0.0009, 0.001, 0.0011, 0.0012, 0.0013, 0.0014, 0.0015, 0.0015, 0.0016, 0.0016, 0.0016, 0.0016, 0.0015, 0.0015, 0.0014, 0.0013 ],
          [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0002, 0.0002, 0.0002, 0.0002, 0.0003, 0.0003, 0.0004, 0.0004, 0.0005, 0.0005, 0.0005, 0.0006, 0.0006, 0.0007, 0.0007, 0.0007, 0.0008, 0.0008, 0.0008, 0.0008, 0.0008, 0.0008, 0.0008, 0.0008, 0.0007, 0.0007 ],
          [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0001, 0.0001, 0.0001, 0.0001, 0.0002, 0.0002, 0.0002, 0.0003, 0.0003, 0.0003, 0.0003, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0003, 0.0003, 0.0003, 0.0003, 0.0002 ]
],

更新2

使用下面的建议，我能够用以下内容翻译坐标:

    const path: any = d3Geo.geoPath(
      d3Geo.geoTransform({
        point: function (x, y) {
          const [x2, y2] = polarPoint(x, y);
          this.stream.point(x2, y2);
        },
      })
    );

最佳答案

给定您的极坐标图innerRadius、outerRadius、domainRange(参数范围)和valueRange(范围of values)，每个点(arg，value)的极坐标计算如下:

const polarPoint = (arg, value) => {
  const angle = (arg - domainRange.min) / 
    (domainRange.max - domainRange.min) * Math.PI * 2;
  const radius = (value - valueRange.min) / 
    (valueRange.max - valueRange.min) * (outerRadius - innerRadius) + innerRadius;
  const x = radius * Math.sin(angle);
  const y = -radius * Math.cos(angle);
  return {x, y};
}

将代码片段视为插图:

const domainRange = {min: 0, max: 100}; // Range of arguments
const valueRange = {min: 0, max: 1000}; // Range of values
const plotWidth = 200; // Width of the cartesian plot
const plotHeight = 100; // Height of the cartesian plot
const innerRadius = 20; // Inner radius of the polar plot
const outerRadius = 100; // Outer radius of the polar plot
const values = [[0, 100],[10,400],[20,700],[30,750],[40,900],[50,600],[60,400],[70,350],[80,300],[90,250],[100,100]]; // pairs of arguments/values

const cartesianPoint = (arg, value) => {
  const x = (arg - domainRange.min) / (domainRange.max - domainRange.min) * plotWidth;
  const y = -(value - valueRange.min) / (valueRange.max - valueRange.min) * plotHeight;
  return {x, y};
};

const polarPoint = (arg, value) => {
  const angle = (arg - domainRange.min) / (domainRange.max - domainRange.min) * Math.PI * 2;
  const radius = (value - valueRange.min) / (valueRange.max - valueRange.min) * (outerRadius - innerRadius) + innerRadius;
  const x = radius * Math.sin(angle);
  const y = -radius * Math.cos(angle);
  return {x, y};
}

const svg = d3.select('svg');

const cartesianPlot = svg.append('g')
  .attr('transform', 'translate(20, 150)');
  
cartesianPlot.append('rect')
  .attr('x', 0)
  .attr('y', -plotHeight)
  .attr('width', plotWidth)
  .attr('height', plotHeight)
  .style('fill', '#eee');

let prev = null;  
values.forEach(v => {
  const point = cartesianPoint(v[0], v[1]);
  cartesianPlot.append('circle')
    .attr('cx', point.x)
    .attr('cy', point.y)
    .attr('r', 3)
    .style('fill', 'red');
  if (prev)  
    cartesianPlot.append('line')
      .attr('x1', prev.x)
      .attr('y1', prev.y)
      .attr('x2', point.x)
      .attr('y2', point.y)
      .style('stroke', 'blue')
  prev = point;     
})  

const polarPlot = svg.append('g')
  .attr('transform', 'translate(350, 120)');
polarPlot.append('circle')
  .attr('r', outerRadius)
  .style('fill', '#eee')
polarPlot.append('circle')
  .attr('r', innerRadius)
  .style('fill', '#fff')  

prev = null;
values.forEach(v => {
  const point = polarPoint(v[0], v[1]);
  polarPlot.append('circle')
    .attr('cx', point.x)
    .attr('cy', point.y)
    .attr('r', 3)
    .style('fill', 'red');
  if (prev)  
    polarPlot.append('line')
      .attr('x1', prev.x)
      .attr('y1', prev.y)
      .attr('x2', point.x)
      .attr('y2', point.y)
      .style('stroke', 'blue')
  prev = point;     
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="250" />

关于d3.js - 使用 D3 创建等高线/极坐标图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67012770/

文章推荐： kuzzle - kuzzle.auth.createApiKey 用法的最佳实践是什么？

文章推荐： code-analysis - FxCop Phoenix 分析引擎中的错误

文章推荐： ruby-on-rails - 设计 - 它如何设置 session cookie？

Python openCv 等高线
我试图理解 findContours 的输出基于 this one 等教程和文档。我想知道为什么我得到我得到的输出。我有一个中间有一个正方形的 jpeg img，我的目标是找到正方形并为其着色(只是为
python - 带空白区域的 Matplotlib 等高线
我有一组数据，其中包含 x 和 y 坐标以及每个坐标的计算值。网格是不规则的，所以现在我一直在创建一个散点图并将值分成多个箱子，以显示为下面链接中 img 上的等高线。 http://i.stack.
python - 从等高线列表中删除 opencv 等高线
这个问题在这里已经有了答案: Test if a numpy array is a member of a list of numpy arrays, and remove it from the
java - 如何从高程栅格近似 vector 等高线？
我有一个存储为栅格的高程图。我想将平滑的“vector ”曲线拟合到恒定高度的轮廓。在我的应用程序中，数据实际上是地理海拔，但问题可以推广到两个变量的任何函数。如果有帮助，我可以生成另一个具有抗锯齿
python - 将注释框添加到 matplotlib 等高线/热图图
我想生成一个带有颜色条的等高线图/热图，然后添加一个注释框。这个数字很丑，但得到了我想要的: add_subplot() 是不够的。如果我尝试将所有内容都放在同一个子图中，则该框会被遮盖。我可以通过使
python - 具有参数限制的 root minuit2 等高线
我正在尝试使用属于 ROOT 的 Minuit2 最小化器为具有物理限制的参数生成等高线图数据分析框架。不幸的是，当我尝试生成等高线图时，Minuit2 似乎有意将参数漂移到超出其限制的区域: >>>
opengl - 如何在 GLSL 中创建纬度(水平)等高线？
我的目标是这种效果:(仅水平轮廓线): 我确实找到了 this example ，但是它会创建水平和垂直轮廓线。我无法完全理解如何调用 fwidth()正在生成线条。 uniform float
python - 从 (x, y, z) 数据集在 matplotlib 中绘制等值线/等高线
大家好，我是编程新手，我正在尝试做一些可能非常明显的事情，但对于我来说，我无法弄明白。我有一系列 x、y、z 数据(在我的例子中，对应于距离、深度和 pH 值)。我想使用 matplotlib 在 x

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - 使用 D3 创建等高线/极坐标图

更新:

更新2