d3 线段生成器

最新推荐文章于 2025-03-11 15:13:33 发布

鸣蜩二九~

最新推荐文章于 2025-03-11 15:13:33 发布

阅读量208

点赞数

分类专栏： d3 文章标签： javascript d3.js

本文链接：https://blog.youkuaiyun.com/moasad/article/details/120810714

版权

d3 专栏收录该内容

14 篇文章

订阅专栏

下定决心，好好过一天

在这里插入图片描述

这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可
源代码

<template>
  <div id="LineChartsD3" width=600 height=600>
  </div>
</template>

<script>
import * as d3 from "d3"
export default {
    name:"LineChartsD3",
    mounted(){
        this.LineChartsD3();
    },
    methods:{
        LineChartsD3(){
            var dataAll = [[100,60],[120,100],[200,150],[230,400]];
            var padding = {left:30,right:30,top:30,bottom:30};
            var svgwidth = 600;
            var svgheight = 600;
            var svg = d3.select("#LineChartsD3")
                        .append("svg")
                        .attr("width",svgwidth)
                        .attr("height",svgheight);
            var linePath = d3.line();
            var linePath1 = d3.line()
                                .x(function(d){return d[0]})
                                .y(function(d,i){return i%2 == 0 ? 40 : 120;})
                                .defined(function(d){return d[0] > 0;})
                                // .interpolate("linear-closed");
            
            function drawUpdateCharts(){
                svg.append("path")
                    .attr("d",linePath(dataAll))
                    .attr("stroke","black")
                    .attr("stroke-width","3px")
                    .attr("fill","none");
            }

            function drawUpdateCharts1(){
                svg.append("path")
                    .attr("d",linePath1(dataAll))
                    .attr("stroke","black")
                    .attr("stroke-width","3px")
                    .attr("fill","none");
            }
            drawUpdateCharts();
            // drawUpdateCharts1();

        }
    }
}
</script>

<style>
#LineChartsD3{
    width: 700;
    height: 700;
}
</style>