zoukankan      html  css  js  c++  java
  • d3 绘制折线图

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>svg</title>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <style type="text/css">
                svg{
                    background-color: #DDD;
                }
                
                .axis line,.axis path{
                    fill:none;
                    stroke:black
                }
            </style>
        </head>
        <body>
            
        </body>
        <script type="text/javascript">
            // 绘制面积图
            let width=500,height=500,num=30;
            
            // 定义数据源 学员成绩
            let score=[60,50,80,35,70,40]
            
            // 创建svg
            let svg = d3.select('body').append('svg').attr('width',width).attr('height',height)
            
            // 创建g元素
            let g = svg.append('g').attr('transform',`translate(${num},${num})`)
            
            
            // 定义比例尺
            let scaleX = d3.scale.linear().domain([0,score.length-1]).range([0,width-num*2])
            // let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([0,height-num*2])
            let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([height-num*2,0])
            
            // 定义线生成器
            let line = d3.svg.line()
                        .x((d,i)=>{return scaleX(i)})
                        .y((d,i)=>{return scaleY(d)})
                        .interpolate('cardinal')
                        
            // 追加path路径  d
            g.append('path')
                .attr('d',()=>{
                    console.log(line(score))
                    return line(score)
                })
                .attr('fill','none')
                .attr('stroke','orangered')
            
            // 绘制坐标
            let x = d3.svg.axis().scale(scaleX)
            let y = d3.svg.axis().scale(scaleY).orient('left')
            
            
            g.append('g').attr('class','axis').call(x).attr('transform',`translate(0,${height-num*2})`)
            g.append('g').attr('class','axis').call(y)
            
        </script>
    
    </html>
  • 相关阅读:
    JavaScript(16):横版菜单栏
    JavaScript(15):表格行之增删改
    JavaScript(14):实现jQuery的click绑定及链式编程
    c++ -- 左值和右值
    c++--模板与泛型编程
    python--导入其他文件夹下的模块(.py文件)
    python--pickle序列化(持久化)
    python--matplotlib显示中文问题(四种方法)
    machine learning--L1 ,L2 norm
    python--'__main__'的作用
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13976229.html
Copyright © 2011-2022 走看看