d3成神之路(六)：散点图

散点图主要还是使用 svg 的 path元素，设置path元素的 d属性即可。 x轴，y轴都是线性轴，这个比较简单。

核心代码是这三句

  .attr('d', d => `M${xScale(d.xValue)}, ${yScale(d.yValue)}h0`).attr("stroke-linecap", "round").attr("stroke-width", 20)

stroke-linecap 用于设置开放路径的描边
值有这么几种 butt | round | square | inherit

<?xml version="1.0"?>
<svg width="120" height="120"viewPort="0 0 120 120" version="1.1"xmlns="http://www.w3.org/2000/svg"><line stroke-linecap="butt"x1="30" y1="30" x2="30" y2="90"stroke="black" stroke-width="20"/><line stroke-linecap="round"x1="60" y1="30" x2="60" y2="90"stroke="black" stroke-width="20"/><line stroke-linecap="square"x1="90" y1="30" x2="90" y2="90"stroke="black" stroke-width="20"/><path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"stroke="white" />
</svg>

对应的效果

stroke-width 属性可以用于控制点的大小。

<!DOCTYPE html>
<html><head><title>基础散点图</title>
</head><body><svg id="main" width="800" height="800"></svg><script src="https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js"></script><script>const originData = [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.20],[11.5, 7.20],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]]const data = originData.map(x => {return { xValue: x[0], yValue: x[1] }})const svg = d3.select("#main")const width = svg.attr('width')const height = svg.attr('height')const margin = { top: 60, right: 30, bottom: 60, left: 200 }const innerHeight = height - margin.top - margin.bottomconst innerWidth = width - margin.left - margin.rightconst g = svg.append('g').attr('id', 'maingroup').attr('transform', `translate(${margin.left}, ${margin.top})`)const xScale = d3.scaleLinear().domain([0, d3.max(data, x => x.xValue)]).range([0, innerWidth]).nice()const yScale = d3.scaleLinear().domain([0, d3.max(data, x => x.yValue)]).range([innerHeight, 0]).nice()g.selectAll('.scatter').data(data).join('path').attr('class', 'scatter').attr('d', d => `M${xScale(d.xValue)}, ${yScale(d.yValue)}h0`).attr("stroke", "steelblue").attr("stroke-linecap", "round").attr("stroke-width", 20).attr('fill', '#5470c6')const yAxis = d3.axisLeft(yScale)const xAxis = d3.axisBottom(xScale)g.append('g').call(yAxis)g.append('g').call(xAxis).attr('transform', `translate(0, ${innerHeight})`)d3.selectAll('.tick text').attr('font-size', '2em')g.append('text').text('基础散点图').attr('font-size', '3em').attr('x', innerWidth / 2 - 200).attr('y', -10)</script>
</body></html>

d3成神之路(六)：散点图相关推荐

d3成神之路（三）：折线图
<!DOCTYPE html> <html><head><title>先做一个柱状图</title></head><bod ...
vim 成“神“之路（一）
文章目录 1. 安装 1.1 linux 1.2 MacOs的安装 1.3 Windows的安装 1.4 vim中文帮助文档安装 2. vim基本概念和基础命令 2.1 基本的键位映射如下: 2.2 ...
Java成神之路[转]
阿里大牛珍藏架构资料,点击链接免费获取针对本文,博主最近在写<成神之路系列文章> ,分章分节介绍所有知识点.欢迎关注. 主要版本更新时间备注 v1.0 2015-08-01 首次发布 ...
JVM成神之路-Java内存模型（JMM）
Java 内存模型基础什么是 Java 内存模型(JMM-共享内存模型) 内存模型描述了程序中各个变量(实例域.静态域和数组元素)之间的关系,以及在实际计算机系统中将变量存储到内存和从内存中取出变量 ...
大数据成神之路(持续更新)
<2021年最新版大数据面试题全面开启更新> <2021年最新版大数据面试题全面开启更新> 已经在公众号更新文章目录: 大数据成神之路-Java高级特性增强 - 大数据成神之路 ...
阿里巴巴开发手册最新版、码出高效、性能调优实战、成神之路
清幽现云山, 虚静出内功 <阿里巴巴Java开发手册>是阿里内部Java工程师所遵循的开发规范,涵盖编程规约.单元测试规约.异常日志规约.MySQL规约.工程规约.安全规约等,这是近万名阿 ...
（上）史上最全 Flink SQL 成神之路（全文 18 万字、138 个案例、42 张图）
1.前言看了那么多的技术文,你能明白作者想让你在读完文章后学到什么吗? 大数据羊说__的文章会让你明白博主会阐明博主期望本文能给小伙伴们带来什么帮助,让小伙伴萌能直观明白博主的心思博主会以实际的 ...
《Java工程师成神之路》终于免费开放下载了！
很多Java程序员一直希望找到一份完整的学习路径,但是市面上很多书都是专注某一个领域的,没有一份完整的大图,以至于很多程序员很迷茫,不知道自己到底应该从哪里开始学,或者不知道自己学习些什么. 好在,很 ...
Java成神之路技术整理
转载自 Java成神之路技术整理以下是Java技术栈微信公众号发布的所有关于 Java 的技术干货,会从以下几个方面汇总,本文会长期更新. Java 基础篇 Java 集合篇 Java 多线程篇 J ...

d3成神之路(六)：散点图

d3成神之路(六)：散点图相关推荐

最新文章

热门文章