我正在自学D3,以绘制我为一个我的项目收集和处理的一些数据。我相信我拥有D3的基础,因此我决定开始创建自己的Scatterplot。因此,连同一些测试数据,我编写了一些将点绘制到屏幕上的代码(当然,应该如此)。它会打印出图表中的元素,但它们都位于svg的左上方。
任何人都可以提供一些帮助,并帮助我理解为什么这样做吗?我在SO上找不到任何类似的帖子。
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [[0.3,0.3], [0.10, 0.10], [0.4, 0.4], [0.8, 0.8]];
var w = 500;
var h = 300;
var padding = 20;
var svg = d3.select('body')
.append("svg")
.attr('width', w)
.attr('height', h)
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; });
</script>
</body>
</html>
答案 0 :(得分:0)
正如注释中指出的那样,您的代码正在产生预期的结果。
本质上,您想通过笛卡尔坐标将数据从其范围映射到要分配的空间(您的SVG)。
您当前的x / y坐标为0.3px / 0.3px。
通过定义范围从0到1的比例,并使用SVG的尺寸映射值,就可以解决问题:
var xScale = d3.scaleLinear()
.domain([0,1]) // that's the extent of your data
.range([0,w]) // that's how wide your SVG is
在理想情况下,您将重复此操作并定义一个yScale
来计算点的y坐标。