• D3学习之坐标系绘制


    坐标轴的绘制我们需要搞清楚以下三个要点:

    1)、axis函数

    2)、.call()函数用于组合

    3)、坐标轴的平移旋转

    关于第三点其实就是"transform","translate(X,Y)"的含义和效果结合自己要求进行使用。

    <html>  
    <head>  
        <meta charset="utf-8">
        <title>坐标轴</title>  
     
        <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: skyblue;
            shape-rendering: crispEdges;
      stroke-width: 3px;
        }
         
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        .MyPath {
            fill: none;
            stroke: darkred;
            stroke-width: 2px;
        }
        </style>
     
    </head>
    <body> 
    <script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script>
    <script>
     
    var svg = d3.select("body")
       .append("svg")
                .attr("width", 400)
                .attr("height", 400);//向body中添加了一个svg元素
    // 自定义数据
    var data = [12,25,28,56,96,56,45,78];
    //定义比例尺
        var xScale = d3.scale.linear()
                        .domain([0, data.length-1])
                        .range([0, 300]);
        var yScale = d3.scale.linear()
                        .domain([0, d3.max(data)])
                        .range([250, 0]);
     //使用axis函数来生成坐标轴的组合元素
        var xAxis = d3.svg.axis()
                    .scale(xScale)//坐标轴联立刻度尺,用于缩放
                    .orient("bottom");//该函数指定坐标轴刻度的方向
     var yAxis = d3.svg.axis()
                     .scale(yScale)
                     .orient("left");
     //插入坐标轴
        var gxAxis = svg.append("g")//添加一个g(group)元素,用于存放坐标轴的元素
                        .attr("class","axis")//添加一个类(类名叫axis),用于修饰坐标轴//其实无影响(非必需代码))
                        .attr("transform","translate(30,350)")
                        .call(xAxis);//添加x轴(关键代码,不可省略)
        var gyAxis = svg.append("g")
                        .attr("class","axis")
                        .attr("transform","translate(30,100)")
                        .call(yAxis);
     // //上面的代码还可以怎么写呢,其实完全可以这样来写
     // var xAxis = d3.svg.axis()
     //    .scale(xScale);
     // var yAxis = d3.svg.axis()
     //    .orient("left")
     //    .scale(yScale);
     // //不定义直接添加也是可以的
     // svg.append("g")
     //  .attr("transform","translate(30,350)")
     //  .call(xAxis);
     // svg.append("g")
     //  .attr("transform","translate(30,100)")
     //  .call(yAxis);
        //  线段生成器
        var line = d3.svg.line()
                .x( function(d,i){ return xScale(i); } )
                .y( function(d){ return yScale(d); } )
                .interpolate("cardinal");
        // 折线图
        svg.append("path")
            .attr("class","MyPath")
            .attr("d", line(data) )
            .attr("transform","translate(30,100)");
    </script>
    </body>  
    </html>  
  • 相关阅读:
    Asp.Net.Core 系列-中间件和依赖注入Hosting篇
    Asp.Net.Core 系列-中间件和依赖注入进阶篇
    Asp.Net.Core 系列-中间件和依赖注入基础篇
    修饰符总结
    CSS3边框border知识点
    浅谈CSS中的居中
    c#中的委托和事件
    c#基础知识复习-static
    c#基础知识复习
    Bfc的理解
  • 原文地址:https://www.cnblogs.com/gti2baby/p/11270885.html
Copyright © 2020-2023  润新知