我正在尝试根据我拥有的数据集创建下面的图表。下面是我到目前为止创建的示例代码。截至目前，日期已经过硬编码。是否有可能帮助创建预期的输出。
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
</head>
<style>
body {
font: 15px sans-serif;
shape-rendering: crispEdges;
}
svg {
fill: #ffbfbf;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:#ffdfbf}
.RdYlGn .q8-11{fill:#bfffdf}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
</style>
<body>
<script type="text/javascript" src="d3.js"> </script>
<h3>Try & Buy Model: </h3>
<script>
//Array of dummy data values (simple!)
//var dataset = [ 5, 10, 13, 18, 20, 25, 30, 40, 50];
d3.csv("test.csv", function(error, csv) {
if (error) throw error;
var data = d3.nest()
.key(function(d) { return d.Date_Time; })
.rollup(function(d) { return (d[0].leadtoOI); })
.map(csv);
var width = 1000,
height = 40,
cellSize = 17; // cell size
padding = 10;
var percent = d3.format(".1%"),
dformat = d3.time.format("%y-%m-%d").parse;
//Configure x and y scale functions
//Note each scale accounts for padding
var xScale = d3.scale.linear()
.domain([0, d3.max(csv)])
.range([0, width]);
//Note y scale inverts values, so larger inputs return smaller
//outputs. That's because we want the y value for the "top"
//of each bar. You could flip the two range values to take
//the opposite approach.
var yScale = d3.scale.linear()
.domain([ 0, d3.max(csv) ])
.rangeRound([ height - padding, padding ]);
var color = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
//var color = d3.scale.category20c();
//Configure y axis generator
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("body")
.data(d3.range(2005, 2010))
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g");
//.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");;
svg.append("text")
.attr("x", 10)
.attr("y", 10)
.attr("font-size", "12px")
.style("fill", "black")
//.text("2015-11-11")
//.text("x", x(csv[0])
//.text(function (d) {
// //alert(d.Date_Time);
// //alert(d3.time.format("%y-%m-%d"));
// //alert(dformat(d.Date_Time));
// return d.Date_Time;
// })
//.attr("transform", "translate(10,5)");
.attr("transform", "translate(0," + (cellSize + 2.5 ) + ")")
//d3.time.format("%Y-%m-%d %H:%M:%S").parse
//Create bars
var rects = svg.selectAll("rect")
.data(csv)
.enter()
.append("rect")
.attr("x", function (d, i) { return (cellSize + (cellSize * i ) + i); })
.attr("y", cellSize)
.attr("width", cellSize)
.attr("height", cellSize)
.attr("fill", function(d) { if (d.leadtoOI == 1 ) {
return "#ff6666";
}
return "#ccff99";
})
//.attr("fill", function (d) {return color (d) ; })
.attr("transform", "translate(" + (cellSize + 100 ) + ", 0)");
rects.append("title")
.text(function(d) { return d.Date_Time+ "-" + d.leadtoOI; });
});
</script>
data.csv
Date_Time,leadtoOI,OI Prediction from Model
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,1,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-11,1,0
2010-11-11,0,0
2010-11-11,0,0
2010-11-12,0,0
2010-11-12,0,0
2010-11-12,0,0
2010-11-12,0,0
2010-11-12,0,0