SVGへの数学では、JavaScriptでの翻訳を座標

michelmm：

私はJavaScriptで書かれた可視化スクリプト上で動作するように持っているとD3を使用してSVG。

今、私は別の座標システムEITH直面しています。

• ソース・データのための（左から右へ、上へ下）数学的座標
• SVGキャンバスのために（左から右へ、上から下へ）SVG座標

DOES D3やSVGの提供をセットアップする方法の数学モデルを採用する変換キャンバス、または私はコード内のcoordiante変換を行うものとしますか？

ヘラルド・ファータド：

ハックからいくつかの異なる解決策があるtransform = "scale(1,-1)"の座標を変換するための純粋なJavaScript関数には。

しかし、最も簡単な慣用D3溶液であるスケールを使用します。例えば、このような規模...

const scale = d3.scaleLinear()
    .domain([0, height])
    .range([height, 0])

...非常に簡単になりますSVGの上下垂直軸反転、より一般的なボトムアップ数学の軸に。

ここではデモがあります。まず通常のコード、といくつかの円をプロットし0, 0、2, 2、4, 4データなどのように：

const data = d3.range(100).map((d, i) => ({
  x: i * 2,
  y: d * 2
}));
const svg = d3.select("svg");
const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 1)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)

svg {
  background-color: lavender;
}

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

今同じコードが、垂直方向の座標を反転させるための尺度を使用しました：

const data = d3.range(100).map((d, i) => ({
  x: i * 2,
  y: d * 2
}));
const scale = d3.scaleLinear()
  .domain([0, 150])
  .range([150, 0]);
const svg = d3.select("svg");
const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 1)
  .attr("cx", d => d.x)
  .attr("cy", d => scale(d.y))

svg {
  background-color: lavender;
}

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