D3.js 如何按未显示列对D3聚集图表进行排序

我正在D3中创建一个聚类图，它显示了按品牌划分的许多卷类型。数据还包括每个品牌的图像和sortID

我可以将图表与图像一起渲染，但我现在要做的是按“sortID”列对图表进行排序。鉴于我已将该列从细化数据集中排除，因此不太确定如何执行此操作：

    var data2 = d3.keys(data[0]).filter(function(key) {
  return key !== "brand_alt" & key !== "brand_image" & key !== "sortID"
});

是否仍然可以使用“sortID”对图表进行排序，或者是否需要重新设计

任何帮助都将不胜感激

---

这是我的

在排除列之前只需进行排序。也就是说，在您的问题中定义

data2

之前，请添加以下内容：

data.sort((a, b) => d3.ascending(a.sortID, b.sortID))

完整示例：

var保证金={
前20名，
右:20,，
底数：70，
左：40
},
//宽度=pbi.width-margin.left-margin.right，
//高度=pbi.height-margin.top-margin.bottom，
宽度=500-边距。左侧-边距。右侧，
高度=500-页边距.顶部-页边距.底部，
图像大小=35；
var x0=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，0.1）；
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“F8B90B”、“8F1F61”、“2B328C”、“C1D42F”、“5AB88D”、“00A5D3”、“2B328C”）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“品牌替换”：“A”，
“品牌”：2704659，
“设施”：4499890，
“地点”：2159981，
“市场”：3853788，
“商品化”：10604510，
“价格”：8819342，
“业务”：4114496，
“sortID”：4，
“品牌形象”：https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png"
}, {
“品牌替换”：“B”，
“品牌”：2027307，
“设施”：3277946，
“地点”：1420518，
“市场”：2454721，
“商品化”：7017731，
“价格”：56528，
“业务”：2472223，
“sortID”：6，
“品牌形象”：https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png"
}, {
“品牌替换”：“C”，
“品牌”：1208495，
“设施”：2141490，
“地点”：1058031，
“市场”：1999120，
“商品化”：5355235，
“价格”：5120254，
“运营”：2607672，
“sortID”：5，
“品牌形象”：https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png"
}, {
“品牌替换”：“D”，
“品牌”：1140516，
“设施”：1938695，
“地点”：925060，
“市场”：1607297，
“商品化”：4782119，
“价格”：4746856，
“业务”：3187797，
“sortID”：1，
“品牌形象”：https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png"
}, {
“品牌名称”：“E”，
“品牌”：894368，
“设施”：1558919，
“地点”：725973，
“市场”：1311479，
“商品化”：3596343，
“价格”：3239173，
“业务”：1575308，
“sortID”：5，
“品牌形象”：https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png"
}, {
“品牌替换”：“F”，
“品牌”：737462，
“设施”：1345341，
“地点”：679201，
“市场”：1203944，
“商品化”：3157759，
“价格”：3414001，
“业务”：1910571，
“sortID”：2，
“品牌形象”：https://planning-int.kalibrate.com/planningimages/305/logos/7-Eleven.svg"
}];
data.sort（（a，b）=>d3.升序（a.sortID，b.sortID））
var data2=d3.键（数据[0]）.过滤器（函数（键）{
返回键！==“品牌替换”和键！==“品牌图像”和键！==“sortID”
});
data.forEach（函数（d）{
d、 volumes=data2.map（函数（名称）{
返回{
姓名:姓名,，
值：+d[名称]
};
});
});
x0.domain（data.map）（函数（d）{
返回d.brand\u alt；
}));
x1.domain（data2.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3.最大值（d.卷，函数（d）{
返回d值；
});
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
var xxx=svg.selectAll（“.xxx”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“转换”，函数（d）{
返回“translate”（+x0（d.brand_alt）+”，0）；
});
xxx.选择全部（“rect”）
.数据（功能（d）{
返回d卷；
})
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回x1（d.name）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“宽度”，x1.rangeBand（）*0.9）
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
/*
xxx.选择全部（“文本”）
.数据（功能（d）{
返回d卷；
})
.enter（）.append（“文本”）
.attr（“x”，函数（d）{
返回x1（d.name）+x1.rangeBand（）/2；
})
.style（“文本锚定”、“中间”）
.attr（“y”，函数（d）{
返回y（d值）-8
})
.文本（功能（d）{
返回（d值）
})
*/
//形象
svg.append（“g”）
.选择全部（“图像”）
.数据（数据）
.输入（）
.append（“svg:image”）
.attr（“x”，函数（d）{
返回（x0（d.brand_alt）+x0.rangeBand（）/2）-18
})
.attr（“y”，高度+边距。底部-40）
.attr（“宽度”，图像大小）
.attr（“xlink:href”，函数（d）{return d.brand_image}）；
var legend=svg.selectAll（“.legend”）
.data（data2.slice（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*20+”）；
});
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.文本（功能（d）{
返回d；
});
正文{
字体：10px san