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>

 

posted @ 2019-07-30 16:28  BLAGT2  阅读(741)  评论(4)  编辑  收藏  举报