一、前言
根據需要，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 數據的映射關係，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("今天");
四、效果
五、總結
原理很簡單，在指定位置畫矩形，在指定位置寫文字。
在這裏標記下，以後稍加修改可以繼續使用