[数据与分析可视化] D3入门教程2-在d3中构建形状
d3.js入门教程2-在 d3.js中构建形状
d3.js是一个用于绘图的JavaScript 库。 它可以可视化展示任何类型的数据。 d3.js允许绘制形状,然后将各种形状构建一个图形。本文档描述了一些函数,可以更有效地从数据中绘制svg。
形状的添加
圆形的添加
在svg中绘制圆形。需要三个参数:分别代表圆心x位置的cx、圆心y位置的cy和半径的r。基础调用函数如下:
<circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>
现在,让我们用javascript来实现它,这基本上是相同的过程。
<!-- 直接绘图 -->
<svg>
<circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="circle"></svg>
<script>
// 创建svg元素
var svg = d3.select("#circle").append("svg").attr("width", 200).attr("height", 200)
// 设置属性
// stroke设置轮廓颜色
svg.append('circle').attr('cx', 100).attr('cy', 100).attr('r', 30).attr('stroke', 'black').attr('fill', 'red')
</script>
其中蓝色圆是由html绘图元素创建,红色圆是通过js创建
矩形的添加
在svg中绘制矩形,四个参数是必需的:x,y,width和height。
<rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>
现在,让我们用javascript来实现它,这基本上是相同的过程。
<!-- 直接绘图 -->
<svg>
<rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="rect"></svg>
<script>
// 创建svg元素
var svg = d3.select("#rect").append("svg").attr("width", 800).attr("height", 200)
// 设置属性
svg.append('rect')
.attr('x', 10)
.attr('y', 120)
.attr('width', 600)
.attr('height', 40)
.attr('stroke', 'black')
.attr('fill', 'red');
其中蓝色矩形是由html绘图元素创建,红色矩形是通过js创建
线段的添加
在svg中绘制线段,四个参数是必需的:x0,y0,x1和y1(线段的两个顶点坐标)。
<line stroke="#69b3a2" x0=10 y0=10, x1=500 y1=100></line>
现在,让我们用javascript来实现它,这基本上是相同的过程。
<!-- 直接绘图 -->
<svg>
<line stroke="#69b3a2" x0=10 y0=10, x1=300 y1=100></line>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="segment"></svg>
<script>
// 创建svg元素
var svg = d3.select("#segment").append("svg").attr("width", 800).attr("height", 200)
// 设置属性
svg.append('line')
.attr('x1', 10)
.attr('y1', 10)
.attr('x2', 700)
.attr('y2', 100)
.attr('stroke', 'red')
</script>
其中蓝色线段是由html绘图元素创建,红色线段是通过js创建
文本的添加
在svg中添加文本,需要三个参数:x,y和text。
<text stroke="#69b3a2" style="font-size: 19px" x=100 y=50>I'm a piece of text</text>
现在,让我们用javascript来实现它,这基本上是相同的过程。
<!-- 直接绘图 -->
<svg>
<text stroke="#69b3a2" style="font-size: 19px" x=100 y=80>I'm a piece of text</text>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="text"></svg>
<script>
// 创建svg元素
var svg = d3.select("#text").append("svg").attr("width", 800).attr("height", 200)
//设置属性
svg.append('text')
.attr('x', 60)
.attr('y', 50)
.attr('stroke', 'red')
.style("font-size", 19)
.text("I'm another piece of text")
</script>
其中蓝色文本是由html绘图元素创建,红色文本是通过js创建
折线的添加
在svg添加文本,参数比较复杂。具体如下:
<path style="fill: none" stroke="black" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>
幸运的是,d3.js提供可以更有效地绘制折线的函数
<!-- 直接绘图 -->
<svg height=200 width=600>
<path style="fill: none" stroke="#69b3a2" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="line" height=200 width=600></svg>
<script>
// 创建svg元素
var svg = d3.select("#line").append("svg")
// 创建数据,多个点连接成折线
var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]
// 创建连接函数
var lineFunc = d3.line()
.x(function (d) { return d.x })
.y(function (d) { return d.y })
// 添加元素
svg.append('path')
.attr('d', lineFunc(data))
.attr('stroke', 'red')
.attr('fill', 'none');
</script>
其中蓝色线条是由html绘图元素创建,红色线条是通过js创建
当然可以设置线条类型,如下所示
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="curve" height=300 width=600></svg>
<script>
// 创建数据
var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]
// 创建svg元素
var svg = d3.select("#curve").append("svg").attr("width", 1800).attr("height", 200)
// 创建辅助函数
var curveFunc = d3.line()
// 设置线条类型,具体设置参考官方文档,可以尝试curveStep.
.curve(d3.curveBasis)
.x(function (d) { return d.x })
.y(function (d) { return d.y })
svg.append('path')
.attr('d', curveFunc(data))
.attr('stroke', 'black')
.attr('fill', 'none');
</script>
区域的添加
html的svg标签原生语法画区域很麻烦,还是用js容易。原生代码如下所示:
<path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>
js代码如下:
<!-- 原生绘图 -->
<svg height=300 width=800>
<path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="area" height=300 width=800></svg>
<script>
// 创建数据
var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]
// 创建svg元素
var svg = d3.select("#area").append("svg")
// 创建辅助函数
var curveFunc = d3.area()
.x(function (d) { return d.x })
.y1(function (d) { return d.y }) // 区域上边界坐标
.y0(200) // 区域下边界坐标
// 添加属性
svg.append('path')
.attr('d', curveFunc(data))
.attr('stroke', 'black')
.attr('fill', 'red');
</script>
圆弧的添加
圆弧的添加也是一样,js最好。原生代码如下:
<path style="fill: #69b3a2" stroke="black" transform="translate(400,200)" d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>
现在,让我们使用d3.arc()辅助函数来绘制相同类型的形状。我们需要提供4个参数:innerRadius、outerRadius、startAngle、endAngle
<!-- 原生绘图 -->
<svg height=400 width=400>
<path style="fill: #69b3a2" stroke="black" transform="translate(400,200)"
d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 添加一个空的svg图片 -->
<svg id="arc" height=400 width=400></svg>
<script>
// 创建svg元素
var svg = d3.select("#arc").append("svg")
// 添加弧形
svg
.append("path")
.attr("transform", "translate(400,100)") // 平移距离
.attr("d", d3.arc()
.innerRadius(100) // 内圈半径
.outerRadius(150) // 外圈半径
.startAngle(3.14) // 开始角度(弧度),最下方为3.14
.endAngle(3.14 * 1.6) // 结束角度(弧度)
)
.attr('stroke', 'black')
.attr('fill', 'red');
</script>
其中蓝色圆弧是由html绘图元素创建,红色圆弧是通过js创建
参考
本文来自博客园,作者:落痕的寒假,转载请注明原文链接:https://www.cnblogs.com/luohenyueji/p/16970188.html
![](https://gitcode.net/LuohenYJ/article_picture_warehouse/-/raw/main/wechat/content/%E5%8A%A0%E6%B2%B9%E9%B8%AD.gif)