如何夸大 SVG 图的 Y 轴？答案

【问题标题】：How to exaggerate the Y axis of an SVG plot?如何夸大 SVG 图的 Y 轴？
【发布时间】：2021-06-03 00:39:33
【问题描述】：

在这个 SVG 图表中，线太平了。如何夸大点的 Y 值差异，使其看起来更加“锯齿形”，线的最低点位于图表底部，最高点位于顶部？

svg {
  display: flex;
  width: calc(100% + 4em);
  transform: translateX(-2em);
  clip-path: polygon(2em 0, calc(100% - 2em) 0, calc(100% - 2em) 100%, 2em 100%);
}

polyline {
  transform: scaleY(-1);
}

<svg viewBox="0 -100 900 100" class="chart" style="height: 100vh; width: 100vw;">
          <defs>
            <marker id="red-circle" viewBox="0 0 10 10" refX="5" refY="5" orient="auto">
              <circle fill="red" cx="5" cy="5" r="5" />
            </marker>
          </defs>
          <polyline fill="#FEF9CC" stroke="#FED225" stroke-width="2" points="
              0, 0
              100, 23
              200, 21
              300, 20
              400, 20
              500, 23
              600, 28
              700, 30
              800, 30
              900, 30
              0, -99999
              0, 0
             " marker-start="url(#red-circle)" marker-end="url(#red-circle)" marker-mid="url(#red-circle)" />
        </svg>

【问题讨论】：

调整 viewBox 值 - 使高度值变小。
更改viewBox 的第二个和第四个值似乎对“zig-zaggyness”没有任何影响，我尝试了50 -50 和200 -200。

标签： math svg plot charts polyline

【解决方案1】：

我在 Reddit 上收到了公式 here。以下是我的实现方式：

const exaggerate = function () {
  const polyline = document.querySelector('polyline');
  const points = [...polyline.points].slice(2, -2);
  // slice off (ignore) first 2 and last 2 because
  // they are purely for closing the loop
  // so that it can be filled with a color
  const ys = points.map(({ y }) => y);
  const y_min = Math.min(...ys);
  const y_max = Math.max(...ys);
  points.forEach((point) => {
    point.y = (point.y - y_min) * 100 / (y_max - y_min);
  });
}

exaggerate();

svg {
  display: flex;
  width: calc(100% + 4em);
  transform: translateX(-2em);
  clip-path: polygon(2em 0, calc(100% - 2em) 0, calc(100% - 2em) 100%, 2em 100%);
}

polyline {
  transform: scaleY(-1);
}

<svg viewBox="0 -100 900 100" class="chart" style="height: 100vh; width: 100vw;">
          <defs>
            <marker id="red-circle" viewBox="0 0 10 10" refX="5" refY="5" orient="auto">
              <circle fill="red" cx="5" cy="5" r="5" />
            </marker>
    https://stackoverflow.com/questions/66473797/how-to-exaggerate-the-y-axis-of-an-svg-plot#      </defs>
          <polyline fill="#FEF9CC" stroke="#FED225" stroke-width="2" points="
              0, 0
              100, 23
              200, 21
              300, 20
              400, 20
              500, 23
              600, 28
              700, 30
              800, 30
              900, 30
              0, -99999
              0, 0
             " marker-start="url(#red-circle)" marker-end="url(#red-circle)" marker-mid="url(#red-circle)" />
        </svg>

编辑：

也遇到了this 问题和答案，供任何感兴趣的人参考。

【讨论】：