利用对d3.line()和path绘制简单折线图1

2201_75814951

已于 2023-09-20 16:21:03 修改

阅读量164

点赞数 1

文章标签： javascript 前端开发语言

于 2023-09-19 14:08:03 首次发布

本文链接：https://blog.csdn.net/2201_75814951/article/details/133026737

版权

代码内容是看别的博主写的，只有几个地方是自己稍加改动了。

这里只是自己敲了一遍后存在这里方便以后查看和复习。

<body>
    <svg id="routePath" width="4000" height="400"></svg>
    <script>

        var margin={top:20,right:20,bottom:20,left:20};
        var width=1200-margin.left-margin.right;
        var height=400-margin.top-margin.bottom;
        var svg=d3.select("svg")
                .attr("width",1200)
                .attr("height",400)
                .append("g")
                .attr("transform","translate("+margin.left+","+margin.top+")")//将g标签移到中间，等会儿坐标轴就会在中间
  
        var data = Array.apply(0, Array(31)).map( function (item, i) {  
        // 产生31条数据        
        i++;    
        return  {date:  '2013-12-'  + (i < 10 ?  '0'  + i : i), pv: parseInt(Math.random() * 100)} 
        }); 
        console.log(data)
        //读取数据，将日期转变为标准格式，才能用extent
        const alldate=[]
        data.forEach(function(each){
            alldate.push(new Date(each.date))
        })
        console.log(alldate)

        //定义x比例尺
        var xscale=d3.scaleTime()
                    //.domain(d3.extent(alldate))//可以这样，但是没必要
                    .domain(d3.extent(data,function(d){return new Date(d.date)}))//将日期转换为标准日期格式，不用单独将日期提取出来
                    .range([0,width])
        //y比例尺
        var yscale=d3.scaleLinear()
                    .domain([0,d3.max(data,function(d){return d.pv})])
                    .range([height,0])

        //y轴
        svg.append("g")
            .call(d3.axisLeft(yscale))

        // 绘制X轴
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xscale));

        //画线
        const linegenerator=d3.line()
        .x(function(d) {return xscale(new Date(d.date))})
        .y(function(d){return yscale(d.pv)})
        

        svg.append('path')
        .attr('fill','none')
        .attr("stroke", "steelblue")//缺一不可
        .attr("stroke-width", 1.5)
        .attr('d',linegenerator(data))//'path'中的'd'之后，跟的一定是画线的位置信息
            //linegenerator的作用就是将数据信息转换为线条的位置信息。
        //如果前面存在一个变量比如path_data=linegenerator(data),则此处填入path_data就行。

        var add_point=svg.selectAll('circle')
        .data(data)
        .enter()
        .append('g')//这里是为什么
        .append('circle')
        .attr('cy',linegenerator.y())
        .attr('cx',linegenerator.x())
        .attr('r',3.5)
        .on('mouseover',function(){d3.select(this).transition().duration(500).attr('r',5)})//鼠标触碰会变大的一个特效



    </script>
</body>