博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
D3.js 绘制散点图
阅读量:4349 次
发布时间:2019-06-07

本文共 993 字,大约阅读时间需要 3 分钟。

对于散点图,使用的数组需要包含坐标元素,即 x, y。同时,散点图需要使用 circle 元素。

var svg = d2.select("body")    .append("svg")    .attr({        width:w,        height:h})svg.selectAll("circle")    .data(dataset)    .enter()    .append("circle")    .attr("cx",function(d){        return d[0];    })    .attr("cy",function(d){        return d[1];    })    .attr("r",5);

前期中的传值方式有点不同,因为function(d)中的d将保存着D3传过来 的当前数据值,而且是大数组中的小数组。也就是说,此时不能用 return d,而是要用return [0] 和return [1],他们分别返回小数组中的第一个和第二个元素。

其图形生成如下:

添加标签:

这一段代码将text元素追加到了每个数据点上并设定了元素的内容。

svg.selsctAll("text")    .data(dataset)    .enter()    .append{
"text") .text(function(d){ return d[0] + "," +d[1]; .attr("x",function(d){ return d[0] }) .attr("y",function(d){ return d[1]; }) .attr("font-family","sans-serif") .attr("font-size","11px") .attr("fill","red");
            
D3: A simple scatterplot with value labels

 

转载于:https://www.cnblogs.com/guangluwutu/p/9971826.html

你可能感兴趣的文章
Consistent Hashing算法
查看>>
C++基础--完善Socket C/S ,实现客户端,服务器端断开重连
查看>>
lvs,nginx反向代理,虚拟主机
查看>>
jquip,更简洁的代码
查看>>
【OJ】PAT-A解题报告
查看>>
文档语法
查看>>
利用套接字实现进程通信一例
查看>>
linux中shell变量$#,$@,$0,$1,$2的含义解释
查看>>
常用的shell命令整理
查看>>
A Brief Introduction to the Design of UBIFS
查看>>
了解你的Linux系统:必须掌握的20个命令
查看>>
js setInterval 启用&停止
查看>>
knockoutJS学习笔记04:监控属性
查看>>
Linux下启动/关闭Oracle
查看>>
session和cookie的区别
查看>>
oracle 数据库、实例、服务名、SID
查看>>
web.xml文件的作用
查看>>
linux下oracle调试小知识
查看>>
alert弹出窗口,点击确认后关闭页面
查看>>
oracle问题之数据库恢复(三)
查看>>