D3-小试散点图

来源：互联网发布：windows系统和mac系统编辑：程序博客网时间：2024/05/29 19:14

正在学习D3.V4.0，先来绘制一个散点图吧。

效果图：

步骤：

1. 原始数据

let points = [{"x": 0, "y": 0.5},{"x": 0, "y": 3},{"x": 1.2, "y": 2.9},{"x": 3.3, "y": 5.5},{"x": 0.6, "y": 0.7},{"x": 3.5, "y": 0.5},{"x": 3.5, "y": 5},{"x": 3.5, "y": 0}];

2. 设置比例尺

let ratio = 1.2;let scaleX = d3.scaleLinear().domain([0, ratio * d3.max(points, (value, index) => value.x)]).range([0, width]);let scaleY = d3.scaleLinear().domain([0, ratio * d3.max(points, (value, index) => value.y)]).range([height, 0]);

3. 数据存放容器

let container = d3.select(".svg-scatter").append("svg");

4. 绘制离散的数据点

let circles = container.selectAll("circle").data(points).enter().append("circle").attrs({"fill":"#F00","r": 5,"cx": (value) => padding.left + scaleX(value.x),"cy": (value) => padding.bottom + scaleY(value.y)});

5. 绘制坐标轴

let axisX = d3.axisBottom().scale(scaleX);axis_container.append("g").attrs({"class": "axis axis-x","transform": "translate(0, " + height + ")"}).call(axisX);let axisY = d3.axisLeft().scale(scaleY);axis_container.append("g").attrs({"class": "axis axis-y"}).call(axisY);

遇到的问题：

1. 想要使用json格式一次性设置多属性

解决：引用额外的js类库文件：selection-multi，已支持

2. Y轴坐标起始点并不是从左下开始的

解决：反向设置Y轴比例尺的值域（range）：d3.scaleLinear()..range([height, 0]);；

点坐标也从下方开始计算："cy": (value) => padding.bottom + scaleY(value.y)。

参考：

http://www.broadview.com.cn/book/4786

https://stackoverflow.com/questions/20822466/how-to-set-multiple-attributes-with-one-value-function/38209449#38209449

https://stackoverflow.com/questions/20197961/reversed-y-axis-d3#answer-20200322

阅读全文

0 0