javascript 中的数学到 svg 坐标转换
math to svg coordinate translation in javascript
我必须使用 javascript 和使用 d3 的 svg 编写可视化脚本。
现在我面临着不同的坐标系。
- 源数据的数学坐标(从左到右,从下到上)
- SVG 的 SVG 坐标(从左到右,从上到下)canvas
d3 或 svg 是否提供了一种方法来设置 canvas 转换以采用数学模型,或者我应该只在代码中进行坐标转换?
有几种不同的解决方案,从 hacky 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>
我必须使用 javascript 和使用 d3 的 svg 编写可视化脚本。
现在我面临着不同的坐标系。
- 源数据的数学坐标(从左到右,从下到上)
- SVG 的 SVG 坐标(从左到右,从上到下)canvas
d3 或 svg 是否提供了一种方法来设置 canvas 转换以采用数学模型,或者我应该只在代码中进行坐标转换?
有几种不同的解决方案,从 hacky 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>