Question

我正在尝试使用d3来创建一个最终几乎就像条形图的图表。但是，我想通过使用非常小的单个正方形来实现这一点。像下面的图像，但忽略了周围的随机方块：

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

每个方块代表投票（或投票组取决于在特定日期投票的数量）并且可以有3个可能的值，每个值具有不同的蓝色阴影，即浅蓝色，蓝色和深蓝色。 / p>

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

我已经尝试使用表格和div在HTML中进行标记，但这已经广泛失控并最终大大降低了页面加载速度 - 因此改为使用SVG。

任何有关如何处理此事的想法都将受到赞赏。

Answer 1

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

但是，您需要考虑一些事项。 y轴和x轴必须成比例，因此您必须仔细考虑：

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

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

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

它假设了一些事情（为简单起见！）：

每个刻度都是一个值
身高＆amp;框的宽度设置
```
var boxheight = 6;
```

根据框的大小和数据值

，高度/宽度可以是动态的

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;

我希望这足以让你开始！

另一个可以帮助你的关键是学习如何将每个数据连接选择设置为变量，然后在其中选择将允许您访问外部绑定数据。例如。下面，每个数据组（原始数组中的值） - ＆gt;具有类型（a，b或c） - ＆gt;有矩形

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 })

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

1 个答案: