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]);
            
            // 构造曲面面积生成器  x y0 y1
            let area = d3.svg.area()
                        .x((d,i)=>{return scaleX(i)})
                        // .y0((d,i)=>{return 0})
                        .y0((d,i)=>{return height-num*2})
                        .y1((d,i)=>{return scaleY(d)})
                        .interpolate('cardinal')
                        
            // 绘制路径  通过路径绘制面积图形  path d 
            let color = d3.scale.category20()
            g.append('path')
                .attr('d',(d,i)=>{
                    console.log(area(score))
                    // M0,60L1,50L2,80L3,35L4,70L5,40L5,0L4,0L3,0L2,0L1,0L0,0Z
                    return area(score)
                })
                .attr('fill','steelblue');
                
            
            // 生成坐标轴
            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>
  • 相关阅读:
    使用鼠标
    TCP编程函数和步骤
    ASP.NET MVC+EF框架+EasyUI实现
    线性表简介
    一个项目的简单开发流程——需求、数据库、编码
    图像处理网络资源
    OPENCV 中的图像旋转与缩放
    命令行下面使用MAKEFILE方式编译OPENCV程序
    OpenCV In Thanksgiving Day
    OpenCV 下面的图像亮度变换 Intensity transformation
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13976210.html
Copyright © 2011-2022 走看看