知识图谱可视化前奏之d3.js
- 2019 年 10 月 5 日
- 筆記
知识图谱可视化前奏之d3.js
0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话
0.说在前面
这两天一直在更机器学习及leetcode，今天来一篇知识图谱的核心知识，那就是数据可视化，可视化方面霸主地位的d3,从认识到绘图,你将学会d3基本操作以及前端可视化的套路。 让我们一起来感受d3的魅力吧！
1.d3.js初识
D3.js是一个用于根据数据操作文档的JavaScript库。D3可帮助您使用HTML，SVG和CSS将数据变为现实。D3强调Web标准，为您提供现代浏览器的全部功能，而无需将自己与专有框架联系起来，将强大的可视化组件和数据驱动方法结合到DOM操作中。
d3.js引用
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
选择器
<P>Hello World1</P> <P>Hello World2</P> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script> /* 选择器：d3.select()或d3.selectAll() 像下面d3.select().selectAll().text()这种称为链式语法 */ //d3.select("body").selectAll("p").text("Hello D3js") var c = d3.select("body") .selectAll("p") .text("您好，d3.js!") c.style("color","red") .style("font-size","72px") </script>
选择器进阶
<p>Apple</p> <p id="sec" class="twlas">Pear</p> <p class="twlas">hah</p> <h1>Banana</h1> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> /* 1.选择所有的p var p = d3.selectAll("p") */ /* 2.选择第一个p var p = d3.select("p") */ /* 3.选择第二个p元素 给第二个设置个id,通过id查找 var p = d3.select("#sec") */ /* 4.选择最后两个p元素 给最后两个设置相同的class，在查找时通过记得加. var p = d3.selectAll(".twlas") p.style("color","red") .style("font-size","32px") .style("font-weight","bold") */ /* 5.通过function(d,i)设置第一和第三个style p.style("color", function(d, i) { if(i!=1) { return "red" } }) */ //插入元素 var body = d3.select("body") body.append("p") .text("append p element") //在id为sec前面插入一个p标签 body.insert("p","#sec") .text("insert p element") // 删除元素 var p = body.select("#sec") p.remove() </script>
选择元素和绑定数据
<p>Apple</p> <p>Pear</p> <p>Banana</p> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> /* 选择元素和绑定数据 选择元素 ---d3.select();d3.selectAll() 函数返回结果为选择集 绑定数据 ---datum() 绑定一个数据到选择集上 ---data() 绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定 */ var p = d3.select("body") .selectAll("p") //------datum()练习------ var str = "China" p.datum(str) .text(function(d, i){ return "第 " + (i+1) + " 个元素绑定的数据是 " + d }) /* 第 1 个元素绑定的数据是 China 第 2 个元素绑定的数据是 China 第 3 个元素绑定的数据是 China */ //------data()练习------ var dataset = ["I like dogs", "I like cats", "I like snakes"] p.data(dataset) .text(function(d, i) { return "第 " + (i+1) + " 个元素绑定的数据是 " + d }) /* 第 1 个元素绑定的数据是 I like dogs 第 2 个元素绑定的数据是 I like cats 第 3 个元素绑定的数据是 I like snakes */ </script>
绘制柱形图
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> var width = 300 var height = 300 var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height) var dataset = [250, 210, 170, 130, 90]; //数据（表示矩形的宽度） var rectHeight = 25; //每个矩形所占的像素高度(包括空白) //在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的 svg.selectAll("rect") .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .append("rect") // 添加足够数量的举行元素 .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return d; }) .attr("height",rectHeight-2) //减去2表示每个柱子之间留空白 .attr("fill","#09F"); /* svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .append("rect") //添加足够数量的矩形元素 当有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。 */ </script>
比例尺
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> /* var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小。于是，我们需要一种计算关系，能够：将某一区域的值映射到另一区域，其大小关系不变。这就是比例尺（Scale）。 */ /* 1.线性比例尺 线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。 */ var dataset = [1.2, 2.3, 0.9, 1.5, 3.3] var min = d3.min(dataset) var max = d3.max(dataset) /* 比例尺的定义域 domain 为：[0.9, 3.3] 比例尺的值域 range 为：[0, 300] */ var linear = d3.scaleLinear() .domain([min,max]) .range(0,300) linear(0.9); //返回 0 console.log(linear(2.3)); //返回 175 console.log(linear(3.3)); //返回 300 /* 2.序数比例尺 有时候，定义域和值域不一定是连续的 */ var index = [0, 1, 2, 3, 4]; var color = ["red", "blue", "green", "yellow", "black"]; var ordinal = d3.scaleOrdinal() .domain(index) .range(color); ordinal(0); //返回 red ordinal(2); //返回 green ordinal(4); //返回 black </script>
给柱状图添加比例尺
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script> var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; var linear = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, 250]); var rectHeight = 25; //每个矩形所占的像素高度(包括空白) svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return linear(d); }) .attr("height",rectHeight-2) .attr("fill","steelblue"); </script>
svg中添加坐标轴
/*第一种方式*/ var xaxis = d3.axisBottom(linearx) .ticks(7); //指定刻度的数量 svg.append("g") .call(xaxis); /*第二种方式*/ function xaxis(selection) { selection .attr("name1", "value1") .attr("name2", "value2"); } foo(d3.selectAll("div")) //因此 xaxis(svg.append("g"))
添加x与y坐标轴
... <head> ... <style type="text/css"> .xaxis,.yaxis text { font-family: sans-serif; font-size: 10px; } </style> </head> <body> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var datasetx = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; var linearx = d3.scaleLinear() .domain([0, d3.max(datasetx)]) .range([0, 250]); var lineary = d3.scaleLinear() .domain([0, 125]) .range([0, 125]); var rectHeight = 25; //每个矩形所占的像素高度(包括空白) datasety = [25,50,75,100,125] svg.selectAll("rect") .data(datasetx) .enter() .append("rect") .attr("x",30) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return linearx(d); }) .attr("height",rectHeight-2) .attr("fill","steelblue"); //若axisBottom改为axisTop()则横坐标的ticks朝上 var xaxis = d3.axisBottom(linearx) .ticks(7); //指定刻度的数量 var yaxis = d3.axisLeft(lineary) .tickValues(datasety) .ticks(7) //在 SVG 中添加一个分组元素 <g>，再将坐标轴的其他元素添加到这个 <g> 里即可 svg.append("g") .attr("class","xaxis") .attr("transform","translate(30,0)") .call(xaxis); svg.append("g") .attr("class","yaxis") .attr("transform","translate(30,-2)") .call(yaxis); </script> </body> </html>
原理分析
<!--通过以上代码，在谷歌浏览器上可以看出svg里面 就添加好坐标轴的分组g元素，里面又含有line与text元素， 分组元素<g>，是 SVG 画布中的元素，意思是 group。 此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。如果需要手动添加这些元素就太麻烦了，为此，D3 提供了一个组件：d3.axisBottom()。它为我们完成了以上工作。--> <g> <!-- 第一个刻度 --> <g> <line></line> <!-- 第一个刻度的直线 --> <text></text> <!-- 第一个刻度的文字 --> </g> <!-- 第二个刻度 --> <g> <line></line> <!-- 第二个刻度的直线 --> <text></text> <!-- 第二个刻度的文字 --> </g> ... <!-- 坐标轴的轴线 --> <path></path> </g>
scaleOrdinal使用
//在上述代码中添加下面即可 var xTexts = [ "我", "你", "他" ]; var oridnal = d3.scaleOrdinal() .domain(xTexts) .range([0,100,250])
2.绘制完整的柱形图
<body> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> //画布大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //画布周边的空白 var padding = {left:20, right:30, top:50, bottom:20}; //定义一个数组 var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //x轴的比例尺 var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width - padding.left - padding.right]); //y轴的比例尺 var yScale = d3.scaleLinear() .domain([0,d3.max(dataset)]) //[height - padding.top - padding.bottom, 0]这样可以使得y轴正方向向上 .range([ 0,height - padding.top - padding.bottom]); //定义x轴 var xAxis = d3.axisTop(xScale) //定义y轴 var yAxis = d3.axisLeft(yScale) //矩形之间的空白 var rectPadding = 4; //添加矩形元素 var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") // .attr("transform","translate(" + padding.left + "," + padding.top + ")") /* 柱子绘制位置 */ .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return 0; }) .attr("width", xScale.bandwidth() - rectPadding) .attr("height", function(d){ return yScale(d); }); //添加文字元素 var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("dx",function(){ return (xScale.bandwidth() - rectPadding)/2; }) .attr("dy",function(d){ return 20; }) .text(function(d){ return d; }); //添加x轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .call(xAxis); //添加y轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .call(yAxis); </script> </body>
图形修改及润色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .MyText { fill: #37C743FF; text-anchor: middle; } /*css修改柱子颜色*/ .MyRect { fill: steelblue; } </style> </head> <body> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script type="text/javascript"> //画布大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //画布周边的空白 var padding = {left:20, right:30, top:20, bottom:20}; //定义一个数组 var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //x轴的比例尺 var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width - padding.left - padding.right]); //y轴的比例尺 var yScale = d3.scaleLinear() .domain([0,d3.max(dataset)]) //[height - padding.top - padding.bottom, 0]这样可以使得y轴正方向向上 .range([height - padding.top - padding.bottom, 0]); //定义x轴 var xAxis = d3.axisBottom(xScale) //定义y轴 var yAxis = d3.axisLeft(yScale) //矩形之间的空白 var rectPadding = 4; //添加矩形元素 var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("width", xScale.bandwidth() - rectPadding) .attr("height", function(d){ //y轴朝上写法与上述y轴比例尺的.range([height - padding.top - padding.bottom, 0])配合使用 return height - padding.top - padding.bottom - yScale(d); }); //添加文字元素 var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") //text的x .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) //text的y .attr("y",function(d){ return yScale(d); }) //dx为text的位移，向左为负，向右为正 .attr("dx",function(){ return (xScale.bandwidth() - rectPadding)/2 ; }) //根据图形自己调整,dy为text相对于柱子的位移，向下为正，向上为负号 //当y坐标向下时，为默认情况，此时这里dy为正值时，则正常显示，但当y坐标为上，由于height - padding.top - padding.bottom - yScale(d),此时会出现覆盖情况，text不显示，需手动调整 .attr("dy",function(d){ return -5; }) .text(function(d){ return d; }); //添加x轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")") .call(xAxis); //添加y轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .call(yAxis); </script> </body> </html>
3.让图表动起来
图表动起来
动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。 transition() 启动过渡效果 duration() 指定过渡的持续事件 单位为毫秒 ease() 指定过渡的方式 d3.easeBounce d3.easeLinear等 调用：ease(d3.easeBounce) delay() 指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。 对整体指定时： .transition() .duration(1000) .delay(500) 如此，图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。 又如，对一个一个的图形（图形上绑定了数据）进行指定时： .transition() .duration(1000) .delay(funtion(d,i){ return 200*i; }) 如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。
为上述图形添加动态效果
//添加矩形元素 var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("width", xScale.bandwidth() - rectPadding) .attr("y",function(d){ var min = yScale.domain()[0]; return yScale(min); }) .attr("height", function(d){ return 0; }) .transition() .delay(function(d,i){ return i * 200; }) .duration(2000) .ease(d3.easeBounce) .attr("y",function(d){ return yScale(d); }) .attr("height", function(d){ return height - padding.top - padding.bottom - yScale(d); }); //添加文字元素 var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") //text的x .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) //dx为text的位移，向左为负，向右为正 .attr("dx",function(){ return (xScale.bandwidth() - rectPadding)/2 ; }) //根据图形自己调整,dy为text相对于柱子的位移，向下为正，向上为负号 //当y坐标向下时，为默认情况，此时这里dy为正值时，则正常显示，但当y坐标为上，由于height - padding.top - padding.bottom - yScale(d),此时会出现覆盖情况，text不显示，需手动调整 .attr("dy",function(d){ return -5; }) //text的y .attr("y",function(d){ //获取y的最小值 var min = yScale.domain()[0]; return yScale(min); }) .transition() .delay(function(d,i) { return i*200 }) .duration(2000) .ease(d3.easeCubic) .attr("y",function(d){ return yScale(d) }) //必须放在最后，否则报错！ .text(function(d){ return d; });
4.浅析Update、Enter、Exit
what is Update and Enter?
如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到p的选择集上。 以下分为两种： -第一种：数组元素(数据)大于p标签元素个数 -第二种：数组元素(数据)小于p标签元素个数 第一种情况中会有几个数组元素没有对应的p标签元素，此时这部分称为enter,而有数据与p元素相对应的称为update。 第二种情况中会有几个空余的p元素未能与数据相对应，此时没有数据绑定的部分被称为 Exit。
Update和Enter使用
给定一个元素个数为6的数组，3个p标签，分别处理Update与Enter
<p></p> <p></p> <p></p> <script type="text/javascript" src="d3.min.js" charset="utf-8"></script> <script type="text/javascript"> var dataset = [3,6,9,15,18,20] // 选择body中的p元素 var p =d3.select("body") .selectAll("p") //获取enter部分 var update = p.data(dataset) //update部分的处理：更新属性值 update.text(function(d,i) { return "index " + i +" update " + d }) var enter = update.enter() //enter部分的处理：添加元素后赋予属性值 enter.append("p") .text(function(d, i){ return "index " + i +" enter " + d }); </script>
output
index 0 update 3 index 1 update 6 index 2 update 9 index 3 enter 15 index 4 enter 18 index 5 enter 20
Update 和 Exit 的使用
当对应的元素过多时 （ 绑定数据数量 < 对应元素 ），需要删掉多余的元素。
<p></p> <p></p> <p></p> <script type="text/javascript" src="d3.min.js" charset="utf-8"></script> <script type="text/javascript"> var dataset = [3]; //选择body中的p元素 var p = d3.select("body").selectAll("p"); //获取update部分 var update = p.data(dataset); //获取exit部分 var exit = update.exit(); //update部分的处理：更新属性值 update.text(function(d){ return "update " + d; }); //exit部分的处理：修改p元素的属性 exit.text(function(d){ return "exit"; }); //exit部分的处理通常是删除元素 // exit.remove(); </script>
output
update 3 exit exit
5.交互式操作
用户用于交互的工具一般有三种：鼠标、键盘、触屏
//添加矩形元素 var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") //把类里的 fill 属性清空 .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d,i){ return xScale(i) + rectPadding/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("width", xScale.bandwidth() - rectPadding ) .attr("height", function(d){ return height - padding.top - padding.bottom - yScale(d); }) .attr("fill","steelblue") //填充颜色不要写在CSS里 .on("mouseover",function(d,i){ console.log("MouseOver"); d3.select(this) .attr("fill","yellow"); }) .on("click",function (d,i) { console.log("Click!"); }) .on("mouseout",function(d,i){ console.log("MouseOut") d3.select(this) .transition() .duration(500) .attr("fill","steelblue"); });
