【D3.js數據可視化系列教程】--(十三)坐標軸


1. 定義和創建X軸

//定義X軸
var xAxis = d3.svg.axis()
     .scale(xScale)
     .orient("bottom");

//創建X軸
svg.append("g").call(xAxis);

其中:

  • scale函數用來指定坐標軸的比例尺。
  • orient函數用來指定坐標軸的方位,可取值有leftrighttopbottom
  • 調用的時候任意的選擇器call調用軸,或者xAxis(選擇器)均可。

效果:

  2. 調整X軸的樣式

為顯示刻度尺可以設置樣式為:

.axis path,
.axis line {
 fill: none;
 stroke: black;
    shape-rendering: crispEdges;//這個屬性用來顯示軸
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

並且把坐標軸平移到下面:

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

效果:

  3. 設置刻度數

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5);  //設置刻度數
  • 注意這個ticks函數指定的數字只是一個大概的數量,具體生成多少D3會自動調整。

效果:

  4. Y軸

//定義Y軸
var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .ticks(5);

同樣設置起始坐標

//創建Y軸
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

效果:

  5. 設置刻度的格式

var format = d3.format(".1%");
xAxis.tickFormat(format);

  6. 最后的源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>testD3-11-axes.html</title>
    <script type="text/javascript" src="d3.js"></script>
    <style type="text/css"> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style>
    </head>
    <body>
        <script type="text/javascript"> // 高寬 var w = 500; var h = 300; var padding = 20; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150] ]; // 創建比例尺 var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([padding, w - padding * 2]); var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([h - padding, padding]); var rScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([2, 5]); var formatAsPercentage = d3.format(".1%");//設置刻度的格式 // 創建SVG var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0])+30;//設置原點坐標,以及橫軸位移量 }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { return rScale(d[1]); }); svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d[0] + "," + d[1]; }) .attr("x", function(d) { return xScale(d[0])+30; }) .attr("y", function(d) { return yScale(d[1]); }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "red"); // 定義X軸 var xAxis = d3.svg.axis() .scale(xScale) .ticks(5)//最多刻度數,連上原點 .orient("bottom") .tickFormat(format);//添加刻度格式 // 定義Y軸 var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .tickFormat(format); // 創建X軸 svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (h - padding) + ")")//設置據下邊界的距離 .call(xAxis); // 創建Y軸 svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)")//設置軸據左邊界的距離 .call(yAxis); </script>

    </body>
</html>

  7. 最后的效果:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com