Javascript d3.js条形图矩阵-如果列不同，则重置高度

任务是创建一个“矩阵条形图”，以y轴显示绝对值，但也可以使用色码显示定性尺寸。在这种简单的情况下，定性维度将是

bond

或

equity

。示例数据：

var data = [
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'equity','date':'t1'},
    {'type':'bond','date':'t1'},
    {'type':'bond','date':'t1'},
    {'type':'bond','date':'t1'},
...
];

我使用了一个类似网格的锚定框架来附加

g

，以实现可视化的矩阵部分

var anchorG = graphGroup.selectAll('.anchorG')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'anchor')
  .attr('id', (d, i) => 'anchor' + i)
  .attr('transform', (d, k) => {
    var horSpace = (k % columns) * spacing;
    var vertSpace = ~~((k / columns)) * vSpacing;
    return "translate(" + (-horSpace) + "," + (-vertSpace) + ")";
  });

在下面的片段中，我们将看到所需的效果是可识别的：

var-margins={top:100，bottom:300，left:100，right:100}；
var高度=600；
var宽度=900；
var totalWidth=宽度+边距。左+边距。右；
var totalHeight=高度+边距。顶部+边距。底部；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
风险值数据=[
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'equity'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'bond'，'date'：'t1'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'equity'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
{'type'：'bond'，'date'：'t2'}，
];
var列=5；
var间距=10；
var-vSpacing=10；
var anchorG=graphGroup.selectAll（'.anchorG'）
.数据（数据）
.输入（）
.append（'g'）
.attr（'class'，'anchor'））
.attr（'id'，（d，i）=>'anchor'+i）
.attr（'transform'，（d，k）=>{
var horSpace=（k%列）*间距；
var vertSpace=~（k/列））*vSpacing；
返回“translate”（“+（-horSpace）+”，“+（-vertSpace）+”）；
});
var xScale=d3.scaleOrdinal（）
.范围（[01002000300400500600700]）
.domain（['t0'，'t1'，'t2'，'t3'，'t4'，'t5'，'t6'，'t7'，]）；
var yScale=d3.scaleLinear（）
.范围（[308,0]）
.域名（[0160]）；
graphGroup.append（'g'）
.call（d3.axisBottom（xScale））
.attr（'transform'，'translate（0310）'）；
graphGroup.append（'g'）
.call（d3.axisRight（yScale））
.attr（'transform'、'translate（0,0'））
.selectAll（'text'）
.attr（'text-anchor'，'end'）
.attr（'transform'，'translate（-15,0）'）；
var colorMap={
“权益”：“003366”，
“债券”：“4f81b9”
};
append（'rect'）
.attr（'x'，函数（d）{return xScale（d.date）+16}）
.attr（'y'，函数（d，i）{return 300}）
.attr（'width'，8）
.attr（'height'，8）
.style（'fill'，函数（d）{return colorMap[d.type]}）
好吧，我建议您使用不同的方法，这不是因为您原来的问题，而是因为您在
中有一个
用于每个数据点！这是很多不必要的因素

因此，在我的解决方案中，我们将基于嵌套数据为每个
类型创建单个
元素：

const nested = d3.nest()
  .key(d => d.date)
  .entries(data);

var anchorG = graphGroup.selectAll('.anchorG')
  .data(nested)
  .enter()
  .append('g')
  .attr('class', 'anchor')
  .attr('id', (d, i) => 'anchor' + i)
  .attr('transform', d => "translate(" + (xScale(d.key) - (columns * spacing) / 2) + "," + (height - margins.bottom) + ")");

然后，我们将矩形附加到每个单独的
：

通过这种方式，我们修复了大量不必要的元素，作为一种副作用，我们最终也修复了您原来的问题

以下是更改后的代码：


var页边距={
前100名，
底数：300，
左:100,，
右：100
};
var高度=600；
var宽度=900；
var totalWidth=宽度+边距.left+边距.right；
var totalHeight=高度+页边距.top+页边距.bottom；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
风险值数据=[{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“权益”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
{
“类型”：“债券”，
“日期”：“t1”
},
const rects = anchorG.selectAll(null)
  .data(d => d.values)
  .enter()
  .append("rect")
  .attr('x', (_, i) => (i % columns) * spacing)
  .attr('y', (_, i) => -(~~((i / columns)) * vSpacing))
  .attr('width', 8)
  .attr('height', 8)
  .style('fill', function(d) {
    return colorMap[d.type]
  });