D3画完整柱状图(带坐标轴、标签)

   昨天晚上本来打算花一点时间把之前学的柱状图改一下,用CSV文件来替换自定义数据。这一替换可不得了,一晚上就搭进去了,还好今早找到了问题的所在,原因在于我的数据引用出了问题。

现在就来讲解一下如何画一个柱状图吧:

  柱状图的画法和折线图其实很类似,只要掌握了比例尺的用法和坐标轴的画法,我们只要在此基础上添加“rect”元素添加矩形就可以了,但这其中也有一些要点,我会在其中标出,希望对你有用。

  对于d3不同版本带来的代码不适用的解决办法:1)、下载对应的v3或者v4版本加到代码引用里可以解决。

                       2)、对于我博客的代码,只要你确保网络畅通,应该不会出错

  

<!DOCTYPE html>
<html>
  <head>  <meta charset="utf-8">
  <title>文档的标题</title>
</head>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script>//网页引用d3库

</body>
</html>

好了,接下来就是完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绘制图形</title>
    </head>
    <style>
        /* 给body添加大小 */
        body,
        html {
            height: 100%;
        }

            {
            padding: 0;
            margin: 0;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .MyRect {
            fill: palevioletred;
        }

        .MyText {
            fill: black;
            text-anchor: middle;
            font-size: 10px;
        }
    </style>
    <body>
        <script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script>
        <script>
            var width = 500;
            var height = 500;
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
            var padding = {
                left: 30,
                right: 30,
                top: 20,
                bottom: 20
            };
            ////http://blog.sina.com.cn/s/blog_ad72a03a0102v1nx.html  含解释

            d3.csv("../bardata.csv", function(error, data, i) {
                if (error) {
                    console.log(error);
                }

                console.log(data);

                var datavalue = []
                for (let i = 0; i < data.length; i++) {
                    datavalue.push(data[i].value)
                }                   // var xp = d3.scale.ordinal()
                //         // .domain(d3.range(dataset.length))
                //         // 使用map来输入data数组中的字符
                //         .domain(data.map(function(d,i){
                //         //    console.log(d.items)
                //     return d.items
                // }))
                // .rangeRoundBands([0,width-padding.left-padding.right]);

                // var xp = d3.scale.ordinal()
                //     .domain(data.map(function(d){ return d.items;}))
                //     .rangeBands([0,width-padding.left-padding.right]);//以上定义xp(即xscale)横坐标序数比例尺的方法都可以试一下,会有不同的体验
                var xp = d3.scale.ordinal()
                    .domain(data.map(function(d) {
                        return d.items;
                    }))
                    .rangeRoundBands([0, width - padding.left - padding.right], 0.1);

                var yp = d3.scale.linear()
                    .domain([0, d3.max(datavalue)])
                    .range([height - padding.top - padding.bottom, 0]) //反过来?为什么呢(之前似乎讲过哦0w0)

                var xAxis = d3.svg.axis()
                    .scale(xp)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(yp)
                    .orient("left");

                var rectPadding = 4;

                var rects = svg.selectAll(".MyRect")
                    .data(data)
                    .enter()
                    .append("rect")
                    .attr("class", "MyRect")
                    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                    .attr("x", function(d, i) {
                       return xp(d.items);
                    })
                    .attr("y", function(d) {
                        return yp(d.value);
                    })
                    .attr("width", xp.rangeBand() - rectPadding)
                    .attr("height", function(d) {
                        return height - padding.top - padding.bottom - yp(d.value);
                    })
                    .on("mouseover", function(d, i) {
                        d3.select(this)
                            .style("fill", "aliceblue");
                    })
                    .on("mouseout", function(d, i) {
                        d3.select(this)
                            .style("fill", "greenyellow");
                        // 使用style替换attr才会有交互的效果
                    });
                var texts = svg.selectAll(".MyText")
                    .data(data) //害我出错的就是这儿了,我之前写的是.data(datavalue),datavalue又是哪儿来的呢?为什么引用错误,会导致tips的位置错乱呢?
                    .enter()
                    .append("text")
                    .attr("class", "MyText")
                    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                    .attr("x", function(d) {
                        return xp(d.items);//上面问题的答案都在这儿,d=》data,数据的意思,那data是哪儿来的呢?当然是我们传进来的,那为什么data不会出错,而datavalue会错呢?//是由于xp()是我们之前定义的序数比例尺,我们如果想要使用就必须传入适合的数据(包含x,y),如果只是传入datavalue就只有y值,而我们并没有将x传入。
                    })
                    .attr("y", function(d) {
                        return yp(d.value);
                    })
                    .attr("dx", function() {
                        return (xp.rangeBand() - rectPadding) / 2;
                    })
                    .attr("dy", function(d) {
                        return 15;
                    })
                    .text(function(d) {
                        return d.value;
                    });

                svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                    .call(yAxis);
            })
        </script>
    </body>
</html>

老样子,好货沉底

  

原文地址:https://www.cnblogs.com/gti2baby/p/11286875.html

时间: 2024-10-09 07:48:34

D3画完整柱状图(带坐标轴、标签)的相关文章

2-Highcharts 3D图之3D柱状图带可调试倾斜角度

<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js&

[5] D3.js中如何添加坐标轴

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢.      第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做柱形图的原因.第4节里我们讲解了 scale (比例)的用法,在做坐标轴的时候也需要用到比例.第4节中,我们说到scale 是一个函数,这一节中的坐标轴也

用Ueditor存入数据库带HTML标签的文本,从数据库取出来后,anjular用ng-bind-html处理带HTML标签的文本

ng.module('index-filters', []) .filter('trustHtml', function ($sce) { return function (input) { return $sce.trustAsHtml(input); } }); <tr ng-repeat="item in News" style="height:30px;"> <td>{{item.Title}}</td> <td&g

Execl图表:轻松模拟坐标轴标签

当你的数据表出现负值的时候,横轴上的坐标轴标签就显的很碍眼,那怎么改变呢?其实只需一列简单的辅助数据,就能让你的图表变得很漂亮啦! 1.根据下列数据表添加一列辅助数据,正负值区分开,目的是让标签与数据分别在横轴两边. 2.插入叠加式柱形图,并删除横轴坐标,将坐标标签居中(布局-坐标轴-居中) 3.最重要的一步,将标签的数值改为文字.选中辅助列数据的标签,Ctrl+1,选中标签选项,把"值"替换成"类别标签". 4.最后美化一下图标,就完成啦! 很简单吧!

react和angualr动态插入带html标签或不带html标签的数据

let content = '';//content是后台返回的未知的一长串字符串,可能是'<p>内容<div>一个div</div></p>',也可能是'内容\r\n任何格式' let reg = new RegExp('^<([^>\s]+)[^>]*>(.*?<\/\\1>)?$'); let format = reg.test(content); //content有可能是有格式的(带html标签),也可能无格式

SpringMVC和Freemarker整合,带自定义标签的使用方法

SpringMVC和Freemarker整合,带自定义标签的使用方法. [参考来源:http://www.360doc.com/content/14/1225/14/1007797_435663342.shtml] SpringMVC现在是比较热门的一种框架了,使用起来感觉还是很不错的,现在我分享一下集体的配置和使用,希望对学习SpringMVC的朋友有用.一.首先我们做准备工作,下载Spring包,下载Freemarker包.二.配置web.xml. 1 2 3 4 5 6 7 8 9 10

【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: [html] view plain copy <html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> .axis path, .axis line{ fill: none; stroke: black; sha

d3.js(v5.7)完整地画一个柱状图

一.首先定义画布大小以及绘画区域的位置(总不能顶着屏幕边沿画吧) 代码: 图示: 二.横.纵向坐标轴 代码: 图示: 三.添加矩形个文本以及上色 图示: 原文地址:https://www.cnblogs.com/eco-just/p/10018038.html

Echart 带坐标轴带图标的柱状图

主要过了一遍ECharts的教程,顺带写了个Demo 数据都是假的 var pasttime={ 'PC':'./img/pc.png', 'Pad':'./img/pad.png', 'Mobile':'./img/mobile.png', 'Book':'./img/book.png' }; var seriesLabel = { normal: { show: true, textBorderColor: '#000', textBorderWidth: 1 } } var myChart