d3 折线图

• 下定决心，好好过一天

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

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

<script>
import * as d3 from "d3"
export default {
    
    
    name:"LineCharts_upD3",
    mounted(){
    
    
        this.LineChartsD3();
    },
    methods:{
    
    
        LineChartsD3(){
    
    
            var dataAll = [
                {
    
    
                    country: "china",
                    data: [                
                        [2000,6000],[2001,6800],[2002,10000],[2003,15030],
                        [2004,18000],[2005,26500],[2006,30520],[2007,45500],
                        [2008,60500],[2009,80005],[2010,100005],[2011,102005],
                        [2012,120005],[2012,160005],[2013,180005],[2014,190005]
                    ]
                },
                {
    
    
                    country: "japan",
                    data: [                
                        [2000,9000],[2001,10000],[2002,15000],[2003,18030],
                        [2004,25000],[2005,30500],[2006,41020],[2007,50500],
                        [2008,55500],[2009,66005],[2010,80005],[2011,92005],
                        [2012,90005],[2012,95005],[2013,100005],[2014,105005]
                    ]
                },
            ];
            var padding = {
    
    left:60,right:60,top:60,bottom:60};
            var svgwidth = 600;
            var svgheight = 600;
            var svg = d3.select("#LineCharts_upD3")
                        .append("svg")
                        .attr("width",svgwidth)
                        .attr("height",svgheight);
            var linePath = d3.line();

            function calculateDataMax(){
    
    
                var Max = 0;
                for(var i = 0;i < dataAll.length;i++){
    
    
                    var a = Math.max(d3.max(dataAll[i].data,function(d){
    
    
                        return d[1];
                    }));
                    if(a > Max){
    
    
                        Max = a;
                    }
                }
                return Max;
            }

            var MaxData = calculateDataMax();
            var xScale = d3.scaleLinear()
                            .domain([2000,2014])
                            .range([0,svgwidth - padding.left - padding.right])
            var yScale = d3.scaleLinear()
                            .domain([0,MaxData*1.1])
                            .range([svgheight - padding.bottom - padding.top,0]);
            
            var linePath = d3.line()
                            .x(function(d){
    
    
                                return xScale(d[0]);
                            })
                            .y(function(d){
    
    
                                return yScale(d[1]);
                            })
                            .curve(d3.curveBasis);
            
            var color = [d3.rgb(0,0,255),d3.rgb(0,255,0)];

            function updateCharts(){
    
    
                var update = svg.selectAll("path")
                                .data(dataAll)
                var enter = update.enter();
                var exit = update.exit();

                update.attr("d",function(d){
    
    
                        return linePath(d.data);
                    })
                    .attr("fill","none")
                    .attr("stroke",function(d,i){
    
    
                        return color[i];
                    })
                    .attr("stroke-width",3);

                enter.append("path")
                    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                    .attr("d",function(d){
    
    
                        // console.log(linePath(d.data));
                        return linePath(d.data);
                    })
                    .attr("fill","none")
                    .attr("stroke",function(d,i){
    
    
                        return color[i];
                    })
                    .attr("stroke-width",3);
                
                exit.remove();
            }

            function drawAxis(){
    
    
                var xAxis = d3.axisBottom()
                                .scale(xScale)
                                .ticks(5)
                                .tickFormat(d3.format("d"))
                var yAxis = d3.axisLeft()
                                .scale(yScale)

                svg.append("g")
                    .attr("class","axis")
                    .attr("transform","translate(" + padding.left + "," + (svgheight - padding.bottom) + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("class","axis")
                    .attr("transform","translate(" + padding.left + "," + padding.bottom + ")")
                    .call(yAxis);
            }
            updateCharts();
            drawAxis();
        }
    }
}
</script>

<style>
#LineCharts_upD3{
    
    
    width: 600;
    height: 600;
}
</style>