时间戳

首页 > 解决方案 > 推到 svg 左上角的图形节点

d3.js - 推到 svg 左上角的图形节点

问题描述

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

标签： d3.js

解决方案

正如评论中指出的那样，您的代码正在产生预期的东西。

d3 世界的一个核心概念是音阶（参见这篇精彩的介绍。）

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

这是一个工作 jsFiddle，看看。

推荐阅读