在Vue项目中使用d3.js的示例代码

写一个Demo之前，有一些东西要用d3来达到一些效果，但是在很多论坛上，我们都找不到在Vue中使用D3.js的方法。npm上的D3可以说是非常不人道的，在webpack上也没有提到如何使用D3.js。

终于有很长一段时间，我看到一个外国老大哥看到他的案例，成功实现了D3在Vue项目中的使用

先安装

Npm安装d3 - save-dev以防万一，然后看看package.json

安装完成

在开始之前，让我们渲染一个Vue组件，它使用常规的D3 DOM操作来呈现一个简单的折线图：

脚本导入*从“d3”作为D3；const data=[99，71，78，25，36，92]；导出默认{ name : ' non-vue-折线图'，template: 'div/div '，mounted(){ const SVG=D3 . select(this。$el)。追加(' svg ')。attr('宽度'，500)。attr('高度'，270)。追加(' g ')。attr('transform '，' translate(0，10)')；const x=d3.scaleLinear()。范围([0，430])；const y=d3.scaleLinear()。范围([210，0])；d3.axisLeft()。比例尺(x)；d3.axisTop()。比例尺(y)；x .域(d3 .范围(数据，(d，I)=I))；y.domain([0，d3.max(数据，d=d)]；const createPath=d3.line()。x((d，i)=x(i))。y(d=y(d))；svg.append('path ')。attr('d '，createPath(数据))；},};/script style lang=' sass ' SVG margin : 25px；path fill : none stroke : # 76bf 8 astro ke-width : 3px/style代码很容易理解，但这只是一个基本示例。因为我们不使用模板，需要更多操作和计算的更复杂的可视化将掩盖组件的设计和逻辑。上述方法的另一个警告是，我们不能使用scopedCSS的属性，因为D3动态地向DOM添加元素。

它可以以一种奇怪但优雅的方式实现

模板SVG width=' 500 ' height=' 270 ' g style=' transform : translate(0，10px)' path :d=' line '/g/SVG/templatescript import * as D3 from ' D3 '；导出默认{ name : ' vue-折线图'，data() { return { data: [99，71，78，25，36，92]，line: ' '，}；}，mounted(){ this . calculatepath()；}，methods : { GetScales(){ const x=D3 . ScaleTime()。范围([0，430])；const y=d3.scaleLinear()。范围([210，0])；d3.axisLeft()。比例尺(x)；d3.axisBottom()。比例尺(y)；x . domain(D3 . extension(this . data，(d，I)=I))；y.domain([0，d3.max(this.data，d=d)]；返回{ x，y }；}，calculatePath(){ const scale=this . getscales()；常量路径=d3.line()。x((d，i)=scale.x(i))。y(d=scale . y(d))；this . line=path(this . data)；}, },};/script style lang=' sass ' scopedsvg margin : 25px；path fill : none stroke : # 76bf 8 astro ke-width : 3px/style很酷，即使没有公开任何属性，数据也是硬编码的，很好的把视图和逻辑分开，使用了Vue钩子、方法和数据对象，现象同上。

摘要

以上是边肖介绍的在Vue项目中使用d3.js的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！