D3画完整柱状图（带坐标轴、标签）

时间 2019-11-18

标签 d3 完整柱状坐标轴标签繁體版

原文原文链接

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

如今就来说解一下如何画一个柱状图吧：css

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

　　对于d3不一样版本带来的代码不适用的解决办法：1）、下载对应的v3或者v4版本加到代码引用里能够解决。java

　　　　　　　　　　　　　　　　　　　　　　　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网络

———————————————————————————————————————————————————————————————————app

修改：因为浏览器的沙箱机制致使直接复制代码是无法直接运行的，因此贴出原码外加数据dom

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

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

2、在此若是你没有安装任何服务器，直接想用文件启动网页的化，你能够这样作：

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

2）、

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

3）、键入命令

Python2用这个

4）、启动服务器

5）、浏览器中输入：

打开文件，结束。