d3 区域生成器

• 下定决心，好好过一天~
  

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

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

<script>
import * as d3 from "d3"
export default {
    
    
    name:"AreaChartsD3",
    mounted(){
    
    
        this.AreaChartsD3();
    },
    methods:{
    
    
        AreaChartsD3(){
    
    
            var dataAll = [80,120,130,70,60,90];
            var svgWidth = 600;
            var svgHeight = 600;
            var svg = d3.select("#AreaChartsD3")
                        .append("svg")
                        .attr("width",svgWidth)
                        .attr("height",svgHeight);
            
            var areaPath = d3.area()
                            .x(function(d,i){
    
    return 50 + i*80;})
                            .y0(function(d,i){
    
    return svgHeight/2;})
                            .y1(function(d,i){
    
    return svgHeight/2 - d;});
                            //x0,x1,y

            function drawUpdateCharts(){
    
    
                var updateCharts = svg.data(dataAll)
                                        .enter()
                                        .append("path")
                                        .attr("d",areaPath(dataAll))
                                        .attr("stroke","black")
                                        .attr("stroke-width","3px")
                                        .attr("fill","yellow");
            }

            drawUpdateCharts();
        }
    }
}
</script>

<style>

</style>