d3-v4.x版本-折线图

最新推荐文章于 2025-05-16 16:15:25 发布

dengzeyuan

最新推荐文章于 2025-05-16 16:15:25 发布

阅读量869

点赞数

CC 4.0 BY-SA版权

分类专栏： d3-v4.x版本基本图形实现

本文链接：https://blog.youkuaiyun.com/dengzeyuan/article/details/84286358

该博客介绍了如何在Vue 2.x项目中使用D3.js v4.x版本创建折线图，提供了包含关键代码注释的示例实现，帮助读者理解并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v4.x 版本-折线图

代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。

demo实现效果图如下：

实现代码如下：（包含关键代码注释）

<template>
  <div class="hello">
  </div>
</template>

<script>
const d3 = require("d3");
// import * as d3 from "d3"
export default {
  name: "Emotion",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted: function() {
    this.$nextTick(function() {

      var dataset = [20, 40, 20, 40, 20, 50];
      var width = 400;
      var height = 400;

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px dashed #ccc");

      var padding = { left: 30, right: 30, top: 20, bottom: 20 };
      var grap = 10;

      var xScale = d3 /