預備知識
在svg畫布預定義元素裏有7種形狀元素。畫布上的所有圖形都是由這7種元素組成。
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
D3中的座標軸
<!--
@author Semper_Fi
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title></title>
</head>
<body>
<svg id="svg" width="600" height="300" style="outline: 1px solid red;">
</svg>
</body>
<script>
var dataset = [100, 50, 10, 26, 18];
var powerScale = d3.scalePow()
.exponent(0.5) // 定義指數
.domain([0, 100]) // 定義底數
.range([0, 400]); // 定義值域
var rectHeight = 25; //每個矩形所佔的像素高度(包括空白)
var svg = d3.select("#svg");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return powerScale(d);
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");
var axis = d3.axisBottom() // 指定刻度的方向，這個表示刻度在座標軸下邊。同類型的還有 d3.axisBottom d3.axisLeft d3.axisRight
.scale(powerScale) // 綁定比例尺
.ticks(2); // 指定刻度數量
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(20,130)") // 平移操作，2個參數，第一個參數是向右平移的像素，第二個是向下平移的像素。
.call(axis);
</script>
</html>
效果圖
