Built with blockbuilder.org
forked from ruiyang123's block: TD2
license: mit |
Built with blockbuilder.org
forked from ruiyang123's block: TD2
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var m=5,n=10; | |
var max = 0; | |
var margin = {top: 20,right: 10,bottom: 20,left: 10}; | |
var width = 600 - margin.left - margin.right; | |
var height = 400 - margin.top - margin.bottom; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width+margin.left+margin.right) | |
.attr("height", height+margin.top+margin.bottom) | |
.append("g") | |
.attr("transform","translate(" + margin.left +","+ margin.top +")") | |
var data = d3.range(m).map(function(){ | |
var d = d3.range(n).map(Math.random); | |
max = Math.max(d3.max(d)); | |
return d; | |
}); | |
console.log(data) | |
var color = ["red","blue","green","black","yellow"]; | |
var col = d3.scaleOrdinal(color,d3.range(m)); | |
var color = d3.scaleOrdinal(d3.schemeCategory20); | |
var x = d3.scaleBand() | |
.domain(d3.range(m)) | |
.range([0,width]) | |
.paddingInner(.1); | |
var x2 = d3.scaleBand() | |
.domain(d3.range(n)) | |
.range([0,x.bandwidth()-10]) | |
var y = d3.scaleLinear() | |
.domain([0,max]) | |
.range([0,height]) | |
svg.selectAll("rect").data(data) | |
.enter() | |
.append("g") | |
//.style("stroke","black") | |
//.style("fill","white") | |
//.attr("x",function(d,i){return x(i)}) | |
//.attr("y",function(d,i){return height-y(d3.max(d))}) | |
//.attr("width",function(d,i){return x.bandwidth()}) | |
//.attr("height",function(d,i){return y(d3.max(d))}) | |
.attr("transform",function(d,i){ | |
return "translate("+ x(i) +", "+ 0 +")" | |
}) | |
.selectAll("rect") | |
.data(function(d){ | |
console.log(d); | |
return d;}) | |
.enter() | |
.append("rect") | |
.style("stroke","black") | |
.style("fill",function(d,i){return color(i)}) | |
.attr("x",function(d,i){return x2(i)}) | |
.attr("y",function(d,i){return height - y(d)}) | |
.attr("width",function(d,i){return x2.bandwidth()}) | |
.attr("height",function(d,i){return y(d)}) | |
</script> | |
</body> |