d3 线段生成器

• 下定决心，好好过一天

这里我的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>