D3绘制水平柱状图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3绘制水平柱状图相关的知识,希望对你有一定的参考价值。

一、前言

根据需要,Boss让你绘制水平的柱状图,左边显示昨天的数据,今天显示今天的数据。用D3画图

二、仿造数据

today.csv

name,value,unit
A,2000,%
B,1000,t
C,1400,¥
D,32,d
E,520,d
F,10000,d
G,5500,元
H,740,t
I,850,t
J,950,t
K,1100,t
L,1200,t

yesterday.csv

name,value,unit
A,1000,%
B,800,t
C,1200,¥
D,30,d
E,500,d
F,10000,d
G,5000,元
H,700,t
I,800,t
J,900,t
K,1000,t
L,1100,t

三、画图

大致流程

3.1 画布大小,位置

3.2 数据的映射关系,ordinallinear 常用的。输入,输出

3.3 加载数据,画到指定位置

3.4 添加一些修饰。

 

var width = 960,height = 500;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var margin = {top:50,left:60,right:60,bottom:50};
var xScale = d3.scale.linear().range([0,(width- margin.left - margin.right)/2]);    //X轴和Y轴
var yScale = d3.scale.ordinal().rangeRoundBands([0,height - margin.top - margin.bottom],0.1);   //
 
d3.csv("data/today.csv", function (data) {
        data.sort(function(a,b){ return d3.descending(parseInt(a.value),parseInt(b.value))}); //对加载的数据排序
        xScale.domain([0,d3.max(data, function (d) {
            return parseFloat(d.value);
        })]);
        yScale.domain(data.map(function(d){return d.name}));
        bar1 = svg.append("g")
                .attr("class","bar1")
                .attr("transform","translate("+ width/2 +"," + margin.top +")");
        bar1.selectAll("rect").data(data).enter()
                .append("rect")
                .attr("x", function (d) {
                    return 0;
                })
                .attr("y", function (d) {
                    return yScale(d.name);
                })
                .attr("width", function (d) {
                    return xScale(d.value);
                })
                .attr("height", function () {
                    return yScale.rangeBand();
                })
                .attr("fill","#00ff29");
        bar1.selectAll("text").data(data).enter()
                .append("text")
                .attr("x", function (d) {
                    return xScale(parseFloat(d.value));
                })
                .attr("y", function (d) {
                    return yScale(d.name)+yScale.rangeBand();
                })
                .text(function (d) {
                    return d.name + d.value + d.unit;
                })
    });
    d3.csv("data/yesterday.csv", function (data) {
        data.sort(function(a,b){ return d3.descending(parseInt(a.value),parseInt(b.value))});
//        xScale.domain([0,d3.max(data, function (d) {
//            return parseFloat(d.value);
//        })]);
//        yScale.domain(data.map(function(d){return d.name}));
        bar2 = svg.append("g")
                .attr("class","bar1")
                .attr("transform","translate("+ width/2 +"," + margin.top +")");
        bar2.selectAll("rect").data(data).enter()
                .append("rect")
                .attr("x", function (d) {
                    return 0-xScale(parseFloat(d.value));
                })
                .attr("y", function (d) {
                    return yScale(d.name);
                })
                .attr("width", function (d) {
                    return xScale(d.value);
                })
                .attr("height", function () {
                    return yScale.rangeBand();
                })
                .attr("fill","#f5ef13");
        bar2.selectAll("text").data(data).enter()
                .append("text")
                .attr("x", function (d) {
                    return (-40-xScale(parseFloat(d.value)));
                })
                .attr("y", function (d) {
                    return (parseFloat(yScale(d.name)) + parseFloat(yScale.rangeBand()));
                })
                .text(function (d) {
                    return d.name + d.value + d.unit;
                })
    });
    svg.append("text")
            .attr("class","title")
            .attr("x",300).attr("y",40).text("某公司.");
//添加一些修饰性内容
    d3.select("svg").append("rect")
            .attr("x",740)
            .attr("y",354)
            .attr("width","10")
            .attr("height",10)
            .attr("fill","#f5ef13");
    d3.select("svg").append("text")
            .attr("class","mark")
            .attr("x",755)
            .attr("y",364)
            .text("昨天");
    d3.select("svg").append("rect")
            .attr("x",740)
            .attr("y",369)
            .attr("width","10")
            .attr("height",10)
            .attr("fill","#00ff29")
    d3.select("svg").append("text")
            .attr("class","mark")
            .attr("x",755)
            .attr("y",379)
            .text("今天");


 

四、效果

 

技术分享 

 

五、总结

原理很简单,在指定位置画矩形,在指定位置写文字。

在这里标记下,以后稍加修改可以继续使用

 



本文出自 “用心做事” 博客,请务必保留此出处http://amyhehe.blog.51cto.com/9406021/1760054

以上是关于D3绘制水平柱状图的主要内容,如果未能解决你的问题,请参考以下文章

MATLAB | 面积图饼状图水平柱状图的斜线填充(阴影填充)

MATLAB | 面积图饼状图水平柱状图的斜线填充(阴影填充)

Python使用matplotlib绘制柱状图(bar plot)实战:水平条形图垂直条形图分组条形图堆叠条形图

Python把matplotlib绘制的水平条形图(horizontal bar)转化为竖直的柱状图(vertical bar)实战

D3.js的v5版本入门教程(第九章)——完整的柱状图

d3.js多个坐标轴柱状图