d3.js v4入门之——简单直方图

XSemperFI

于 2020-02-22 10:26:21 发布

阅读量302

点赞数 1

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

版权

<!--
@author Semper_Fi
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title></title>
    <style>
    </style>
</head>

<body>
    <svg id="svg" width="600" height="300" style="outline: 1px solid red;">
    </svg>

</body>
<script>
    var rangeMax = 200;

    var dataSet = [10,20,30,40,50,35,25,15,5,18];

    var xNum = dataSet.length;

    var svg = d3.select("svg");

    // x轴比例尺
    var xScale = d3.scaleLinear() // 序数比例尺
                    .domain([0, xNum]) // 设置定义域
                    .range([0, 300]);

    // 定义x轴
    var xAxis = d3.axisBottom()
                    .scale(xScale) // 绑定比例尺
                    .ticks(xNum);
    // 添加x轴
    svg.append("g")
                .attr("transform", "translate(30,210)")
                .call(xAxis);

    // y轴比例尺
    var yScale = d3.scaleLinear() // 线性比例尺
                    .domain([0, d3.max(dataSet)])
                    .range([rangeMax, 0]);
    
    // 定义y轴
    var yAxis = d3.axisLeft()
                    .scale(yScale) // 绑定比例尺
                    .ticks(7);
    // 添加y轴
    svg.append("g")
                .attr("transform","translate(30 ,10)")
                .call(yAxis);

    // 添加柱状图
    var rects = svg.selectAll(".rect")
                    .data(dataSet)
                    .enter()
                    .append("rect")
                    .attr("class", "rect")
                    .attr("x", (_val, index) => {
                        console.log(xScale(index))
                        return 50 + xScale(index);
                    })
                    .attr("y", function(val, _index) {
                        console.log("y = " + yScale(val))
                        return 10 + yScale(val);
                    })
                    .attr("width", function(val) {
                        return 20;
                    })
                    .attr("height", function(val) {
                        return rangeMax - yScale(val);
                    })
                    .attr("fill", "yellow");  
    // 添加文字
    var texts = svg.selectAll(".MyText")
    	.data(dataSet)
		.enter()
		.append("text")
		.attr("class","MyText")
		.attr("transform","translate(20, 20)")
		.attr("x", function(d,i){
			return 20 + xScale(i);
		} )
		.attr("y",function(val){
			return yScale(val) - 20;
		})
		.attr("dx",function(){
			return 10;
		})
		.attr("dy",function(d){
			return 10;
		})
		.text(function(d){
            console.log("v = " + d)
			return d;
		});
    
</script>
</html>

在这里插入图片描述

XSemperFI

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3.js v4入门之——简单直方图

<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.min.js"></script> <title&g...
复制链接

扫一扫