大家好,今天小编来为大家解答以下的问题，关于vue3网站源码分享，电商网站源码这个很多人还不知道，现在让我们一起来看看吧！
前言
D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者MikeBostock的维护下，前景依然无量，至少现在没有能打的:
D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。我们将把D3和Vue结合在一起-使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。根据广泛定义，D3可拆分为以下几种分库：绝大部分的D3课程或书籍，都会着重讲解在其DOM操作功能上，但这明显与近几年来的web框架理念相违背。用于数据可视化的D3，其核心在于使用绘图指令装饰数据，从源数据创建新的可绘制数据，生成SVG路径以及从数据和方法在DOM中创建数据可视化元素（如轴）的功能。有许多用于管理DOM的工具，所有这些工具都可以在D3中集成数据可视化功能。这也是D3能与Vue无缝结合的原因之一。
于此，我们不需要从D3DOM操作功能开始学起，直接通过实例来入门D3。
1.D3.js渐进入门
以下实例的模版均为以下形式：
<html>\n<head>\n<linkrel=&34;href=&34;>\n<title>LearnD3.js</title>\n</head>\n<body>\n<!–或其它标签–>\n<h1>Firstheading</h1>\n\n<scriptsrc=&34;></script>\n<scriptsrc=&34;></script>\n</body>\n</html>\n复制代码
1.选择和操作
你需要学习的第一件事是如何使用D3.js选择和操作DOM元素。该库在操作DOM方面实际上非常强大，因此理论上可以将其用作jQuery的替代品。以下代码请逐行添加运行。
//index.js\nd3.select();\nd3.selectAll();\n\nd3.select(&39;).style(&39;,&39;)\n.attr(&39;,&39;)\n.text(&39;);\n\nd3.select(&39;).append(&39;).text(&39;);\nd3.select(&39;).append(&39;).text(&39;);\nd3.select(&39;).append(&39;).text(&39;);\n\nd3.selectAll(&39;).style(&39;)\n复制代码
2.数据加载和绑定
当你要创建可视化时，了解如何加载数据以及将其绑定到DOM非常重要。所以在这个实例中，你将学到这两点。
letdataset=[1,2,3,4,5];\n\nd3.select(&39;)\n.selectAll(&39;)\n.data(dataset)\n.enter()\n.append(&39;)//appendsparagraphforeachdataelement\n.text(&39;);\n//.text(function(d){returnd;});\n复制代码
3.创建一个简单的柱状图
首先需要添加一个svg标签
<h1>BarChartusingD3.js</h1>\n\n<svgclass=&34;></svg>\n复制代码
然后在index.js中添加（已添加关键注释）：
//数据集\nletdataset=[80,100,56,120,180,30,40,120,160];\n//定义svg图形宽高，以及柱状图间距\nletsvgWidth=500,svgHeight=300,barPadding=5;\n//通过图形计算每个柱状宽度\nletbarWidth=(svgWidth/dataset.length);\n\n//绘制图形\nletsvg=d3.select(&39;)\n.attr(&34;,svgWidth)\n.attr(&34;,svgHeight);\n\n//rect，长方形\n//文档：http://www.w3school.com.cn/svg/svg_rect.asp\n\nletbarChart=svg.selectAll(&34;)\n.data(dataset)//绑定数组\n.enter()//指定选择集的enter部分\n.append(&34;)//添加足够数量的矩形\n.attr(&34;,d=>svgHeight-d)//d为数据集每一项的值,取y坐标\n.attr(&34;,d=>d)//设定高度\n.attr(&34;,barWidth-barPadding)//设定宽度\n.attr(&34;,(d,i)=>{\nlettranslate=[barWidth*i,0];\nreturn&34;+translate+&34;;\n});//实际是计算每一项值的x坐标\n复制代码
4.在图形上方显示数值
这时就需要在上述代码中创建svg的text文本
lettext=svg.selectAll(&34;)\n.data(dataset)\n.enter()\n.append(&34;)\n.text(d=>d)\n.attr(&34;,(d,i)=>svgHeight-d-2)\n.attr(&34;,(d,i)=>barWidth*i)\n.attr(&34;,&A64C38&39;svg&34;width&34;height&34;rect&34;rect&34;y&34;height&34;width&34;transform&34;translate(&34;)&39;svg&34;width&34;height&34;g&34;transform&34;translate(50,10)&34;g&34;transform&34;translate(50,&34;)&34;svg&34;width&34;height&34;class&34;svg-container&34;line&34;x1&34;x2&34;y1&34;y2&34;stroke&34;red&34;rect&34;x&34;y&34;width&34;height&34;fill&34;34;);\n\nletcircle=svg.append(&34;)\n.attr(&34;,200)\n.attr(&34;,300)\n.attr(&34;,80)\n.attr(&34;,&7CE8D5&34;platform&34;Android&34;percentage&34;platform&34;Windows&34;percentage&34;platform&34;iOS&34;percentage&39;svg&34;width&34;height&34;g&34;transform&34;translate(&34;,&34;)&34;arc&34;g&34;path&34;d&34;fill&34;text&34;transform&34;text-anchor&34;middle&39;https://api.coindesk.com/v1/bpi/historical/close.json?start=2019-03-31&end=2019-07-01&34;DOMContentLoaded&39;svg&34;width&34;height&34;g&34;transform&34;translate(&34;,&34;)&34;g&34;transform&34;translate(0,&34;)&34;.domain&34;g&34;text&34;fill&34;34;)\n.attr(&34;,&34;)\n.attr(&34;,6)\n.attr(&34;,&34;)\n.attr(&34;,&34;)\n.text(&34;);\n\ng.append(&34;)\n.datum(data)\n.attr(&34;,&34;)\n.attr(&34;,&34;)\n.attr(&34;,&34;)\n.attr(&34;,&34;)\n.attr(&34;,1.5)\n.attr(&34;,line);\n}\n\n复制代码
以上原实例均来自：LearnD3forfree。
源码地址：https://scrimba.com/g/gd3js
scrimba是一个非常神奇的网站。它是使用交互式编码截屏工具构建的。
所有的操作都是：
暂停截屏视频→编辑代码→运行它！→查看更改
非常值得安利一波。接下来进入第二部分：Vue中使用D3.js的正确姿势
2.Vue中使用D3.js的正确姿势
我们将使用D3和Vue构建一个基本的柱状图组件。网上有一堆例子，但我们将专注于写Vue，而不是滥用D3。
1.安装依赖
首先，我们需要为项目安装依赖项。我们可以简单地安装和使用D3整库:
npmid3\n复制代码
但我在前面讲到，实际上D3是几个分库的集合，考虑到项目的优化，我们只安装所需的模块。
使用VueCli初始化项目即可。
2.创建柱状图
3.柱状图模块导入
4.创建svg元素
因Vue数据响应的特性，我们不需要用到D3操作DOM的那套链式创建。
5.数据与窗口大小响应
在mounted钩子中，我们将为窗口调整大小事件添加一个监听器，它将触发绘制动画，并将<svg>大小设置为新窗口的比例。我们不会立即渲染，而是等待300毫秒，以确保完全调整窗口大小。
以下是完整的BarChart.vue,请配合注释食用:
<template>\n<divid=&34;class=&34;align=&34;>\n<h1>{{title}}</h1>\n<svgv-if=&34;:width=&34;:height=&34;>\n<g>\n<rect\nv-for=&34;\nclass=&34;\n:key=&34;\n:x=&34;\n:y=&34;\n:width=&34;\n:height=&34;\n></rect>\n</g>\n</svg>\n</div>\n</template>\n\n<script>\nimport{scaleLinear,scaleBand}from&34;;\nimport{max,min}from&34;;\nimport{selectAll}from&34;;\nimport{transition}from&34;;\n\nexportdefault{\nname:&34;,\nprops:{\ntitle:String,\nxKey:String,\nyKey:String,\ndata:Array\n},\nmounted(){\nthis.svgWidth=document.getElementById(&34;).offsetWidth*0.75;\nthis.AddResizeListener();\nthis.AnimateLoad();\n},\ndata:()=>({\nsvgWidth:0,\nredrawToggle:true\n}),\nmethods:{\n//绘制柱形\nAnimateLoad(){\nselectAll(&34;)\n.data(this.data)\n.transition()\n.delay((d,i)=>{\nreturni*150;\n})\n.duration(1000)\n.attr(&34;,d=>{\nreturnthis.yScale(d[this.yKey]);\n})\n.attr(&34;,d=>{\nreturnthis.svgHeight-this.yScale(d[this.yKey]);\n});\n},\n//调整窗口大小后300毫秒重新绘制图表\n//即响应式绘制\nAddResizeListener(){\nwindow.addEventListener(&34;,()=>{\nthis.$data.redrawToggle=false;\nsetTimeout(()=>{\nthis.$data.redrawToggle=true;\nthis.$data.svgWidth=\ndocument.getElementById(&34;).offsetWidth*0.75;\nthis.AnimateLoad();\n},300);\n});\n}\n},\ncomputed:{\ndataMax(){\nreturnmax(this.data,d=>{\nreturnd[this.yKey];\n});\n},\ndataMin(){\nreturnmin(this.data,d=>{\nreturnd[this.yKey];\n});\n},\nxScale(){\nreturnscaleBand()\n.rangeRound([0,this.svgWidth])\n.padding(0.1)\n.domain(\nthis.data.map(d=>{\nreturnd[this.xKey];\n})\n);\n},\n//通过线性比例尺自动生成\nyScale(){\nreturnscaleLinear()\n.rangeRound([this.svgHeight,0])\n.domain([this.dataMin>0?0:this.dataMin,this.dataMax]);\n},\nsvgHeight(){\nreturnthis.svgWidth/1.61803398875;//黄金比例\n}\n}\n};\n</script>\n\n<stylescoped>\n.bar-positive{\nfill:steelblue;\ntransition:r0.2sease-in-out;\n}\n\n.bar-positive:hover{\nfill:brown;\n}\n\n.svg-container{\ndisplay:inline-block;\nposition:relative;\nwidth:100%;\npadding-bottom:1%;\nvertical-align:top;\noverflow:hidden;\n}\n</style>\n复制代码
我们将从父组件App.vue获取数据：
<template>\n<divid=&34;>\n<BarCharttitle=&34;xKey=&34;yKey=&34;:data=&34;/>\n</div>\n</template>\n\n<script>\nimportBarChartfrom&34;;\n\nexportdefault{\nname:&34;,\ncomponents:{\nBarChart\n},\ndata:()=>({\nbarChartData:[\n{\nname:&34;,\namount:25\n},\n{\nname:&34;,\namount:40\n},\n{\nname:&34;,\namount:15\n},\n{\nname:&34;,\namount:9\n}\n]\n})\n};\n</script>\n\n<style>\n34;OpenSans&282f36;\nmargin-top:30px;\n}\n</style>\n复制代码
这时候yarnrunserve后将会看到：
好像还缺点显示数值，考虑到该图高度是根据比例尺生成，我们调整下y坐标：
yScale(){\nreturnscaleLinear()\n.rangeRound([this.svgHeight,0])\n.domain([this.dataMin>0?0:this.dataMin+2,this.dataMax+2]);\n},\n复制代码
在AnimateLoad()末尾添加：
selectAll(&34;)\n.data(this.data)\n.enter()\n复制代码
最后在<g>元素中添加：
<text\nv-for=&34;\n:key=&34;\n:x=&34;\n:y=&34;\nfill=&34;\n>{{item[xKey]}}{{item[yKey]}}\n</text>\n复制代码
3.参考文章
TheHitchhiker’sGuidetod3.jsD3isnotaDataVisualizationLibraryD3中常用的比例尺D3vsG2vsEchartsDynamicDataVisualizationsWithVue.jsandD3
4.总结
该库几乎凭MikeBostock一人之力完成，且在学术界、专业团队中享有极大声誉。
D3更接近底层，与g2、echarts不同，d3能直接操作svg，所以拥有极大的自由度，几乎可以实现任何2d的设计需求。正如其名DataDrivenDocuments，其本质是将数据与DOM绑定，并将数据映射至DOM属性上。D3长于可视化，而不止于可视化，还提供了数据处理、数据分析、DOM操作等诸多功能。如果有想深耕数据可视化方面的前端，D3不得不学。
掌握D3后，限制作品水平的只会是想象力而不再是技术。
源码地址：https://github.com/roger-hiro/d3-bar-chart-vuejs
??看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）关注公众号「前端劝退师」，不定期分享原创知识。原地址：https://juejin.im/post/5d1e074af265da1bca51f8ec
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！