在D3中创建热图(2D直方图)

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return xScale(i); })
  .attr("y", function(d, i) { return yScale(i); })
  .attr("width", xScale.bandwidth())
  .attr("height", yScale.bandwidth())
  .attr("fill", function(d) { return colorScale(d); });

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

var colorLegend = d3.legendColor()
  .scale(colorScale)
  .shapeWidth(30)
  .shapeHeight(10)
  .shapePadding(0)
  .orient("horizontal");

svg.append("g")
  .attr("transform", "translate(20, " + (height + 20) + ")")
  .call(colorLegend);