如何创建由非常小的方块组成的条形图

Question

我正在尝试使用d3创建一个图表，该图表最终几乎就像条形图一样。不过，我想通过使用非常小的个人广场来实现这一点。像下面的图片，但忽略了随机广场点缀周围：

http://i.imgur.com/jYSyhur.jpg

每个方块代表一票（或投票的组取决于有多少票在某一天被做的），可以有3个可能的值，每种颜色都有不同的蓝色，即淡蓝色，蓝色和深蓝色。

我已经找到的一个示例是http://bost.ocks.org/mike/miserables/，但我想将此样式转换为条形图。

我已经尝试在HTML中使用表格和div来完成标记，但是这已经被广泛地失去控制并最终导致大量减慢页面加载速度 - 因此使用SVG代替。

任何想法如何处理这将不胜感激。

Answer 1

你想要做的是堆积条形图的基础：http://bl.ocks.org/mbostock/3886208

不过，也有你需要考虑几件事情。 Y和X轴必须是成比例的，所以你必须仔细考虑：

• 图
• 数据点
• 最大值的数量的大小的每个数据点可以有

并为每个方格选择一个高度，宽度和“值” - 每个方格。

我做了一个示范小提琴这里：http://jsfiddle.net/sa5RK/

它假定几件事情（为简单！）：

• 各记号是一个价值

• 高度&宽度盒子设置为

  var boxheight = 6; 
  

• 高度/ wi DTH可以基于框和数据的大小是动态值

  var margin = {top: 20, right: 20, bottom: 80, left: 40}, 
      width = boxheight * data.length; 
  
  
  var max = d3.max(data, function(d){return d.a + d.b + d.c}); 
  var height = max * boxheight; 
  

我希望这是足以让你开始！

另一个可以帮助你的关键是了解每个数据如何加入选择可以设置为一个变量，然后在里面选择它将允许你访问外部数据。例如。下面，每个数据组（原始数组中的值） - >具有类型（A，B或C） - >具有矩形

var groups = svg.selectAll(".group") 
    .data(data) 
     .enter().append("g") 
     .attr("transform", function(d,i){return "translate(" + x(i) + ", 0)"}) 
     .attr("class", "group") 

var types = groups.selectAll(".type") 
    .data(function(d){return d.offsets}) 
     .enter().append("g") 
     .attr("transform", function(d){ return translate(0,y(d.y1))}) 
     .attr("class", "type") 
     .attr("fill", function(d){return color(d.type)}) 

types.selectAll("rect") 
    .data(function(d){return d3.range(0,d.value)}) 
     .enter().append("rect") 
     .attr("height", boxheight-0.5) 
     .attr("width", boxheight-0.5) 
     .attr("y", function(d){ return boxheight * d })