图节点推到SVG的左上角

时间:2018-07-04 19:58:39

标签: d3.js

我正在自学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>

1 个答案:

答案 0 :(得分:0)

正如注释中指出的那样,您的代码正在产生预期的结果。

d3世界中的一个中心概念是Qubit3D。)

本质上,您想通过笛卡尔坐标将数据从其范围映射到要分配的空间(您的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坐标。

这是scales (see this great intro,快看。