Svg 如何创建由非常小的正方形组成的条形图_Svg_D3.js_Nvd3.js

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

svg d3.js

Svg 如何创建由非常小的正方形组成的条形图,svg,d3.js,nvd3.js,Svg,D3.js,Nvd3.js,我正在尝试使用d3创建一个图表，它最终将几乎像一个条形图。然而，我想通过使用非常小的单个正方形来实现这一点。如下图所示，但忽略周围的随机方块：每个方块代表一次投票（或一组投票，取决于给定日期的投票数量），可以有3个可能的值，每个值都有不同的蓝色，即浅蓝色、蓝色和深蓝色我已经找到的一个例子是，但我想将此样式转换为条形图我已经尝试过使用表和div在HTML中进行标记，但这已经失去了控制，最终大大降低了页面加载速度——因此改用SVG 如果您有任何关于如何实现这一点的想法，我们将不胜感激。您想要

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

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

我已经找到的一个例子是，但我想将此样式转换为条形图

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

如果您有任何关于如何实现这一点的想法，我们将不胜感激。

您想要做的基础是堆叠条形图：

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

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

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

我在这里做了一个小提琴示范：

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

每个记号都是一个值
框的高度和宽度已设置
```
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 })

您要执行的操作的基础是堆叠条形图：