d3.js v4入门之——坐标轴

预备知识

在svg画布预定义元素里有7种形状元素。画布上的所有图形都是由这7种元素组成。

  1. 矩形
  2. 圆形
  3. 椭圆
  4. 线
  5. 折线
  6. 多边形
  7. 路径

D3中的坐标轴

无论方向如何,轴始终在原点渲染。要更改轴相对于图表的位置,请在包含元素上指定一个transform属性。



<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");
	// 指定刻度的方向,这个表示刻度在坐标轴下边。同类型的还有 d3.axisBottom d3.axisLeft d3.axisRight d3.axisTop
    var axis = d3.axisBottom() 
        .scale(powerScale)  //  绑定比例尺
        .ticks(2);  // 指定刻度数量

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(20,130)") // 平移操作,2个参数,第一个参数是向右平移的像素,第二个是向下平移的像素。
        .call(axis);
script>
html>

效果图

d3.js v4入门之——坐标轴_第1张图片

你可能感兴趣的:(前端)