在 SVG 画布的预定义元素里,有七种基本图形:矩形,圆形,椭圆,线段,折线,多边形,路径.
SVG还有g标签,意思是分组,group,可以将其他的容器进行组合.
调用数轴函数并不会返回值,而是会生成数轴相关的可见元素,包括轴线、标签和刻度。
var xAxis = d3.svg.axis();
xAxis.scale(xScale); // 传入比例尺
xAxis.orient("bottom"); //设置标签的位置,是在线上还是线下
svg.append("g") //分组元素是不可见的
.call(xAxis); //call() 接着把 g 交给了 xAxis 函数,也就是要在 g 元素里面生成数轴。
x轴坐标系
<html>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<p>hello world</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(6); //指定刻度的数量
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)") //transform是将整体平移
.call(axis);
</script>
</body>
</html>
xy居中坐标系
居中的关键是linear方法的映射和transform属性的配合使用
<html>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var xlinear = d3.scale.linear()
.domain([-150, 150])
.range([0, 300]);
var ylinear = d3.scale.linear()
.domain([0, 250])
.range([250, 0]);
var xaxis = d3.svg.axis()
.scale(xlinear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(10); //指定刻度的数量
var yaxis = d3.svg.axis()
.scale(ylinear)
.orient("left")
.ticks(5);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(0,250)") //x轴上下平移不会对坐标系造成影响
.call(xaxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(150,0)") //y轴左右平移不会对坐标系造成影响
.call(yaxis);
</script>
</body>
</html>
设置标签样式
var formatAsPercentage = d3.format(".1%");
xAxis.tickFormat(formatAsPercentage);