1

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

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

每个方格代表一个投票（或一组投票，取决于给定日期的投票数），可以有 3 个可能的值，每个值都有不同的蓝色阴影，即浅蓝色、蓝色和深蓝色。

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

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

任何有关如何解决此问题的想法将不胜感激。

4

1 回答 1

4

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

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

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

并为每个刻度选择一个高度、宽度和“值” - 每个正方形。

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

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

  • 每个刻度是一个值

  • 设置盒子的高度和宽度

    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;

我希望这足以让你开始！

另一个对您有帮助的关键是学习如何将每个数据连接选择设置为一个变量，然后在其中选择将允许您访问外部绑定数据。例如。下面，每个数据组（原始数组中的值）-> 具有类型（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 })
于 2013-04-07T01:53:37.430 回答