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

最新推荐文章于 2021-07-26 18:19:50 发布

XSemperFI

最新推荐文章于 2021-07-26 18:19:50 发布

阅读量824

点赞数 2

分类专栏：前端文章标签： d3.js svg

本文链接：https://blog.csdn.net/XSemperFI/article/details/104388099

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

预备知识

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

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

D3中的坐标轴

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

<!--
@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");
	// 指定刻度的方向，这个表示刻度在坐标轴下边。同类型的还有 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>