D3绘制水平柱状图-白红宇

D3绘制水平柱状图

阅读量：6431 次

发布时间：2019-06-23

本文共 4492 字，大约阅读时间需要 14 分钟。

一、前言

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

二、仿造数据

today.csv

name,value,unitA,2000,%B,1000,tC,1400,￥D,32,dE,520,dF,10000,dG,5500,元H,740,tI,850,tJ,950,tK,1100,tL,1200,t

yesterday.csv

name,value,unitA,1000,%B,800,tC,1200,￥D,30,dE,500,dF,10000,dG,5000,元H,700,tI,800,tJ,900,tK,1000,tL,1100,t

三、画图

大致流程

3.1 画布大小，位置

3.2 数据的映射关系，ordinal，linear 常用的。输入，输出

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("今天");