d3_v5.js绘制柱状图(可添加数据和实现排序功能)

这是博主用d3.js第一次绘制的图形,可以实现数据的添加和排序的功能,里面用到了线性比例尺和颜色比例尺等知识,后面都打了备注,因为时间的原因就不一个一个展开说了,源码放在下面,方便我管理也供大家参考!!!

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="d3.min.js"></script>
    <title>d3实践</title>
</head>
<style>
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
</style>

<body>
    <svg width="600" height="600"></svg>
    <script>
        let dataset = [5, 10, 15, 40, 22, 80, 76, 20, 25];
        let marge = {
            top: 60,
            bottom: 60,
            left: 60,
            right: 60
        };
        let svg = d3.select("body").select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height");
        //设置画布位置
        let g = svg.append("g").attr("transform", "translate(" + marge.left + "," + marge.top + ")");

        function draw(x) {
            //定义x轴序数比例尺
            let xScale = d3.scale.ordinal().domain(d3.range(dataset.length))
                .rangeBands([0, width - marge.left], 0.1);
            //定义y轴线性比例尺  
            let yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, height - marge.top - marge.bottom]);
            //定义表示颜色的序数比例尺
            let color = d3.scale.category10();
            //模板
            //获取矩形的update部分
            let updateRect = g.selectAll("rect").data(dataset);
            //获取矩形的enter部分
            let enterRect = updateRect.enter();
            //获取矩形的exit部分
            let exitRect = updateRect.exit();
            //1. 矩形的update部分的处理方法
            updateRect
                .attr("x", function (d, i) {
                    return xScale(i);
                })
                .attr("y", function (d) {
                    return height - marge.top - marge.bottom - yScale(d);
                })
                .attr("width", xScale.rangeBand())
                .attr("height", function (d) {
                    return yScale(d);
                })
                .attr("fill", function (d, i) {
                    return color(i);
                });
            //2. 矩形的enter部分的处理方法
            enterRect
                .append("rect")
                .attr("x", function (d, i) {
                    return xScale(i);
                })
                .attr("y", function (d) {
                    return height - marge.top - marge.bottom - yScale(d);
                })
                .attr("width", xScale.rangeBand())
                .attr("height", function (d) {
                    return yScale(d);
                })
                .attr("fill", function (d, i) {
                    return color(i);
                });
            //3. 矩形的exit部分的处理方法
            exitRect.remove();
            //获取文字的update部分
            let updateText = g.selectAll("text")
                .data(dataset);

            //获取文字的enter部分
            let enterText = updateText.enter();

            //获取文字的exit部分
            let exitText = updateText.exit();
            //1. 文字的update部分的处理方法
            updateText
                .text(function (d) {
                    return d;
                })
                .attr("text-anchor", "middle")
                .attr("x", function (d, i) {
                    return xScale(i);
                })
                .attr("y", function (d) {
                    return height - marge.top - marge.bottom - yScale(d)
                })
                .attr("dx", xScale.rangeBand() / 2)
                .attr("dy", "1em")
            //2. 文字的enter部分的处理方法
            enterText
                .append("text")
                .text(function (d) {
                    return d;
                })
                .attr("text-anchor", "middle")
                .attr("x", function (d, i) {
                    return xScale(i);
                })
                .attr("y", function (d) {
                    return height - marge.top - marge.bottom - yScale(d)
                })
                .attr("dx", xScale.rangeBand() / 2)
                .attr("dy", "1em")
            //3. 文字的exit部分的处理方法
            exitText.remove();
            if(x==true) d3.select("body").select("svg").select(".axis").remove();
            //绘制x坐标轴
            let xAxis = d3.svg.axis().scale(xScale).orient("bottom");
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + marge.left + "," + (height - marge.bottom) + ")")
                .call(xAxis);
            //重新设置y轴比例尺的值域,与原来的相反
            yScale.range([height - marge.top - marge.bottom, 0]);
            let yAxis = d3.svg.axis().scale(yScale).orient("left");
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + marge.left + "," + marge.top + ")")
                .call(yAxis);
            // d3.select(".axis").remove();

        }
        draw(false);

        function mysort() {
            dataset.sort(d3.ascending);
            draw(false);
        }

        function myadd() {
            dataset.push(Math.floor(Math.random() * 80));
            d3.select("body").select(".axis").remove();
            draw(true);
        }
    </script>
    <br>
    <button type="button" onclick="mysort()" style="margin-left: 60px;">排序</button>
    <button type="button" onclick="myadd()" style="margin-left: 60px;">添加数据</button>
</body>

</html>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
对比柱状图可以使用d3.js中的矩形图(rect)元素来绘制。以下是一个简单的例子: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js对比柱状图</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="chart" width="400" height="300"></svg> <script src="script.js"></script> </body> </html> ``` JavaScript代码: ```javascript // 数据 var data = [ {name: 'A', value: 20}, {name: 'B', value: 35}, {name: 'C', value: 10}, {name: 'D', value: 15}, {name: 'E', value: 25} ]; // 定义svg画布大小 var width = 400; var height = 300; // 定义比例尺 var xScale = d3.scaleBand() .domain(data.map(function(d) { return d.name; })) .range([0, width]) .padding(0.1); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.value; })]) .range([height, 0]); // 创建svg元素 var svg = d3.select('#chart') .append('g') .attr('transform', 'translate(' + 50 + ',' + 10 + ')'); // 绘制矩形 svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', function(d) { return xScale(d.name); }) .attr('y', function(d) { return yScale(d.value); }) .attr('width', xScale.bandwidth()) .attr('height', function(d) { return height - yScale(d.value); }) .style('fill', 'steelblue'); ``` 解释: 1. 定义数据,包含每个柱子的名称和值。 2. 定义画布大小。 3. 定义x轴和y轴的比例尺,x轴比例尺使用`scaleBand`,y轴比例尺使用`scaleLinear`。 4. 创建svg元素,并将其偏移50像素到右侧和10像素到下方。 5. 绘制矩形,使用`selectAll`和`data`方法绑定数据,使用`enter`方法进入数据,使用`append`方法添加矩形元素,使用`attr`方法设置x、y、width和height属性,使用`style`方法设置颜色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

詹小友

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值