D3js-畫二維座標軸（x軸，y軸）
阿新 • • 發佈：2019-02-07
結果展示圖：
1.首先要引入D3js的js配置檔案
<span style="font-size:14px;"><span style="white-space:pre"> </span><script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script></span>2.定義一些變數
var width =600; var height=600; 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 padding=30;
width 和height 接下來用於定義SVG(可擴充套件向量圖形)的大小，以及圖形位置的處理。dataset是一個點（point）的陣列。padding用於處理x軸 和 y軸離邊的間距。
3.定義x軸，y軸的尺度
//得到X軸和Y軸的尺度函式 var xScale = d3.scale.linear() .domain([0,d3.max(dataset,function(d) { return d[0]; }) ]) .range([padding,width-padding*2]); var yScale = d3.scale.linear() .domain([0,d3.max(dataset,function(d) { return d[1]; }) ]) .range([height-padding,padding]);<
d3.scale.linear ()指定要使用線性函式的scale。
d3.max(dataset,function(d)
{return d[0];
})
d3.max()是求最大值；上面的意思是求dataset中陣列元素的第一個數（d[0]）的最大值,而d[1]就是陣列的第二個數，
如下圖所示
domain規定了座標軸上值的範圍。range規定了座標軸端點的位置，svg的座標原點是左上角，向右為正，向下為正，而y軸正方向為由下向上，所以(0,
height)才是座標軸的座標原點。
/*溫習下數學：一個自變數是x，因變數是y的函式，x的取值範圍叫定義域，y的就叫值域
domain是表示一個定義域，
range是表示一個值域。*/
4.新增一個SVG
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);google 瀏覽器按F12 可以開啟類似開發者模式的視窗，裡面會有頁面的佈局等等一些重要資訊：如下圖我們可以看到建立了一個我們需要的svg標籤
注意一定要設定svg的高和寬，如果沒有的話，會出現下面這種情況：
只是顯示了這麼一點點。自定義的大小根本無法滿足我們的要求。
5.定義下x軸 和y軸
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(6);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(6);使用axis定製座標軸，d3.svg.axis - create a new axis generator（建立一個axis生成器）。
scale是一個函式 ，可以根據給定的定義域得到值域。（get the range value corresponding to a given domain value.）
orient有四個引數（left、right、top、bottom）定義了座標軸的位置。
ticks定義了座標軸上除最小值和最大值以外最多有多少個刻度,D3js有時會根據自己的情況設定多少個刻度。
6.在svg中建立X軸和Y軸
svg.append("g")
.attr("class","axis")
.call(xAxis)
.attr("transform","translate(0,"+(height-padding)+")")
.append("text") ;//新增座標軸說明
.text("天數")
.attr("transform","translate("+(height-padding)+",0)");//指定座標軸說明的座標
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding+",0)")
.call(yAxis)
.append("text") //新增座標軸說明
.text("人")
.attr("transform","translate(0,"+(padding)+")");//指定座標軸說明的座標attr("transform","translate("+padding+",0)")；transform表示平移，用於確定所在位置
call(xAxis);表示呼叫上面定義的函式實現執行該函式，和java通過方法名呼叫函式執行是一個原理，只是java不用通過call。
7.完整程式碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>D3 test1/title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript">
//定義變數
var width =600;
var height=600;
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 padding=30;
//得到X軸和Y軸的尺度函式
var xScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d)
{
return d[0];
})
])
.range([padding,width-padding*2]);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d)
{
return d[1];
})
])
.range([height-padding,padding]);
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
//definen x axis & y axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(6);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(6);
//creat x axis & y axis
svg.append("g")
.attr("class","axis")
.call(xAxis)
.attr("transform","translate(0,"+(height-padding)+")")
.append("text")
.text("天數")
.attr("transform","translate("+(height-padding)+",0)");
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding+",0)")
.call(yAxis)
.append("text")
.text("人")
.attr("transform","translate(0,"+(padding)+")");
</script>
</body>
</html>