gpt4 book ai didi

javascript - 条形图的子集序数域

转载 作者:行者123 更新时间:2023-12-02 17:01:13 25 4
gpt4 key购买 nike

我要在条形图中绘制三个类别,因此是三个条形。但是,我只想绘制两个类别、两个条形图。我有类别 A、B、C,我想绘制子集 A、B 的图表。这是一个工作jsfiddle 。问题是当我将 ["A","B"] 放入 .x(d3.scale.ordinal().domain(["A","B"]) ) 第三个条形仍然绘制在其他条形之上。感谢帮助。

HTML:

<body> 
<div id='bar1'><div><h3>Bar 1</h3></div></div>
</body>

JS

var data = [{
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "2"
}, {
Category: "A",
ID: "2"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "2"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "4"
}, {
Category: "C",
ID: "1"
}, {
Category: "C",
ID: "2"
}, {
Category: "C",
ID: "3"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
return d.Category;
});

dc.barChart("#bar1")
.width(400).height(150)
.dimension(XDimension)
.group(XDimension.group().reduceSum(function(d){return d.ID}))
.x(d3.scale.ordinal().domain(["A","B"]))
.xUnits(dc.units.ordinal)

dc.renderAll();

最佳答案

此处有缩放或聚焦序数图表的请求:

https://github.com/dc-js/dc.js/issues/416

但是,在实现之前,我建议使用此处描述的“假组”技术:

https://github.com/dc-js/dc.js/wiki/FAQ#how-do-i-filter-the-data-before-its-charted

通用过滤适配器可能看起来像(未经测试):

function filtered_group(group, bins) {
return {
all:function () {
return group.all().filter(function(d) {
return bins.indexOf(d.key) != -1;
});
}
}
};

然后像这样使用它:

var group0 = XDimension.group().reduceSum(function(d){return d.ID}),
xgroup = filtered_group(group0, ["A", "B"]);
chart.group(xgroup);

关于javascript - 条形图的子集序数域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25690301/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com