昨天晚上本来打算花一点时间把之前学的柱状图改一下，用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>

老样子，好货沉底

javascript和D3

———————————————————————————————————————————————————————————————————

修改：由于浏览器的沙箱机制导致直接复制代码是没法直接运行的，所以贴出原码外加数据

链接：https://pan.baidu.com/s/13RhuYM9pz0WiFya0IcOrJQ
提取码：069a

一、最简单的方法是下载HbuiderX，然后导入文件，打开。（二不用看了）

二、在此如果你没有安装任何服务器，直接想用文件启动网页的化，你可以这样做：

1）、确保你的电脑上安装了Python（二或者三的版本都可以）

2）、

在文件路径下打开cmd（上图最简，打开文件，输入cmd，回车ok）

3）、键入命令

Python2用这个

4）、启动服务器

5）、浏览器中输入：

打开文件，结束。

　　

D3画完整柱状图（带坐标轴、标签）的更多相关文章

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

    <!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...

  2. 昨天晚上画了个带apple的图：ide插件与php和xdebug通信原理图，周末写1个调试器。

    昨天晚上画了个带apple的图:ide插件与php和xdebug通信原理图,周末写1个调试器.

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

    ng.module('index-filters', []) .filter('trustHtml', function ($sce) { return function (input) { retu ...

  4. WPF用SkewTransform画3D柱状图

    WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...

  5. d3 画地图终极自适应大小方案

    d3,v4以前用d3画地图的时候,为了让地图差不多正好画在容器的上下左右正中间,不得不慢慢的这样调: const projection = d3.geoMercator() .center([108. ...

  6. 3D Slicer Hide 3D Cube and Axis Labels Programmatically 使用代码隐藏三维视图中的方框和坐标轴标签

    在3D Slicer中,我们如果想在自己写的插件中来修改三维视图中的默认设置的话,那么首先就需要获得三维视图的结点,其类型为vtkMRMLViewNode,获得了这个结点后,我们就可以用代码来修改一系 ...

  7. wordpress调用the_excerpt()不带<p>标签

    我们知道wordpress调用摘要内容用<?php the_excerpt(); ?>就可以,但是它会自动添加一个p标签,例如<p>这里是description</p&g ...

  8. .Net Excel 导出图表Demo(柱状图，多标签页) .net工具类 分享一个简单的随机分红包的实现方式

    .Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...

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

    SpringMVC和Freemarker整合,带自定义标签的使用方法. [参考来源:http://www.360doc.com/content/14/1225/14/1007797_435663342 ...

随机推荐

  1. oracle汉字排序

    oracle在9i之前是对汉字的排序是按照二进制编码进行排序的,很不适合我们的国情,在oracle9i之后,汉字的排序方式有了以下三种方式:        1.使用拼音排序   NLS_SORT=SC ...

  2. Vue公共结果页面实现

    需求 我希望写一个公共结果页面,满足所有模块的结果展示,页面设计要素如下: 结果图标type(成功图标,失败图标) 标题title(如:提交成功) 描述descripton(如:您的工单已提交,请等待 ...

  3. yii安装redis扩展（Windows）

    yii安装redis扩展可以用不同的方式, 最简单便捷的是使用 composer 方式, 有的时候composer会出现一些问题(现在还弄不懂),可能是网络什么的原因吧~ 还可以使用手动安装的方式, ...

  4. Java设计模式-策略模式实际应用场景

    容错恢复机制        容错恢复机制是应用程序开发中非常常见的功能.那么什么是容错恢复呢?简单点说就是:程序运行的时候,正常情况下应该按照某种方式来做,如果按照某种方式来做发生错误的话,系统并不会 ...

  5. 使用Future、asyncio处理并发

    并发的意义 为了高效处理网络I/O,需要使用并发,因为网络有很高的延迟,所以为了不浪费CPU周期去等待,最好在收到网络响应之前做些其他的事. 在I/O密集型应用中,如果代码写得正确,那么不管是用哪种并 ...

  6. 013_STM32程序移植之_DS18B20

    013_STM32程序移植之_DS18B20 1. 测试环境:STM32C8T6 2. 测试模块:DS18B20模块 3. 测试接口: 1. DS18B20模块接口: DS18B20引脚        ...

  7. Call JMS Web Service

    The content type application/json of the response message does not match the content type of the bin ...

  8. Educational Codeforces Round 13 D. Iterated Linear Function 逆元+公式+费马小定理

    D. Iterated Linear Function time limit per test 1 second memory limit per test 256 megabytes input s ...

  9. 腾讯域名防封 微信/QQ域名检测，域名防封的原理

    微信屏蔽网页的依据是什么?明面上的原因是网页内容有诱导.诈骗等不和谐的内容时候,被用户举报就会封闭.实际上这只是表面现象,因为我们能明确的感受到不同的阶段,同样的内容,被封杀的频率差别很大的,也就是说 ...

  10. codeforces#1148E. Earth Wind and Fire（贪心）

    题目链接: http://codeforces.com/contest/1148/problem/E 题意: 给出两个长度为$n$的序列,将第一个序列变成第二个序列,顺序不重要,只需要元素完全相同即可 ...