为什么每个dc.barChart示例都在维度上分组?

huangapple go评论65阅读模式
英文:

Why every single dc.barChart example groups on dimension?

问题

我的跨过滤器的心理印象是这样的:

  1. 创建您希望研究的变量上的维度,和
  2. 在该维度上创建“区间”,即group()

我想创建一个条形图,其中每个条形代表一个范围,例如0<x<1010<x<20,因此我自然地创建了.dimension((datapoint) => datapoint.x),并创建了如下的分组:

dimension.group((x) => {
   if (x<10) return "<10";
   if (x>10 && x<20) return "10<x<20";
   /* and so on */
});

现在,我在将此维度和分组添加到条形图中方面遇到困难。
我遇到的每个ordinal dc.barChart示例都在维度内部进行分组。在我的示例中,类似的情况是:

.dimension((datapoint) => {
   if (datapoint.x<10) return "<10";
   if (datapoint.x>10 && datapoint.x<20) return "10<x<20";
   /* and so on */
});
/* 然后 */
...group().reduceCount();

这感觉反向和错误,并迫使我创建额外的“自定义”维度,这些维度在条形图之外几乎没有用处。

如何将“我的”方法输入到一个最小的、真正简单的dc.barChart中?

英文:

My mental image of crossfilter is that you

  1. create your dimension over the variable you wish to study, and
  2. create "bins" over that dimension, i.e. group().

I want to create a bar chart where every bar represents a range e.g. 0&lt;x&lt;10, 10&lt;x&lt;20, so naturally I create a .dimension((datapoint) =&gt; datapoint.x), and groups like:

dimension.group((x) =&gt; {
   if (x&lt;10) return &quot;&lt;10&quot;;
   if (x&gt;10 &amp;&amp; x&lt;20) return &quot;10&lt;x&lt;20&quot;;
   /* and so on */
});

Now I struggle getting this dimension and group into a bar chart.
Every single ordinal dc.barChart example I've come across does the grouping inside the dimension. The analogy in my example would be:

.dimension((datapoint) =&gt; {
   if (datapoint.x&lt;10) return &quot;&lt;10&quot;;
   if (datapoint.x&gt;10 &amp;&amp; datapoint.x&lt;20) return &quot;10&lt;x&lt;20&quot;;
   /* and so on */
});
/* and then */
...group().reduceCount();

This feels backwards and wrong, and forces me to create additional, "custom" dimensions that are more or less useless outside the scope of the bar chart.

How would I feed "my" approach into a minimal, really simple dc.barChart?

答案1

得分: 1

这原来是一场徒劳无功的追逐。

原来你可以轻松地重复使用维度并在组函数中进行分组。我找到的最简单方法是定义一个阈值数组,例如 var thresholds = [-1000,-100,0,100,1000]; 并将以下内容传递为组函数:

...group((datapoint) => d3.bisectLeft(thresholds, datapoint)-1); // -1 with .centerBar(false) will display things in the right bin

还要确保将序数比例传递给 dc.barChart.x(d3.scale.ordinal()...)。我一开始没能让它起作用的原因(除了我的d3版本3.0.3与dc2.2不兼容之外)是我遗漏了 .xUnits((a) => thresholds.map((d)=>d.toString()))

现在让我们来看看徒劳无功的部分... 这里有一个很大的原因,你不希望这样做,而是采用更不寻常的方法,在.dimension函数中定义你的分组:刷选(brushing)!

刷选需要一个定量比例,我找不到一种方法来进入dc.js内部的刷选过程,以完成刷选和我的xUnits之间的转换。

英文:

So this turned out to be a wild goose chase.

It turns out you can easily reuse dimensions and do the binning in the group function. The simplest way I've found is to define your thresholds in an array, e.g. var thresholds = [-1000,-100,0,100,1000]; and pass the followin as the group function:

...group((datapoint) =&gt; d3.bisectLeft(thresholds, datapoint)-1); // -1 with .centerBar(false) will display things in the right bin

Also make sure you pass an ordinal scale to dc.barChart.x(d3.scale.ordinal()...). The reason I didn't get it to work in the first place (other than my d3 version 3.0.3 didn't play nicely with dc2.2) was that I omitted .xUnits((a) =&gt; thresholds.map((d)=&gt;d.toString())).

Now for the wild goose chase part... There's a big reason you don't want to do this, and instead go for the more unorthodox approach of defining your bins in the .dimension function: brushing!

Brushing requires a quantitative scale, and I've found no way to tap into dc.js internal brushing procedure to do the translation between the brush and my xUnits.

huangapple
  • 本文由 发表于 2023年6月12日 02:50:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76452024.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定