6

私はこのグラフとその機能が本当に好きで、私が欲しい/必要なものにぴったりです。変更する必要があるのは、y軸の順序データを許可するために必要なことだけですが、それを機能させることができないようです（私は初心者です）。

yスケールを線形から序数に変更すると：

yscale[k] = d3.scale.linear() .domain(d3.extent(data, function(d) { return +d[k]; })) .range([h, 0]));

に

yscale[k] = d3.scale.ordinal().rangePoints([h, 0]),
      yscale[k].domain(data.map(function(d) { return d[k]; })))

ブラッシングは引き続き表示され、それ自体で機能しますが、選択した行を残してフィルタリングされません。軸の最上部に移動しない限り、線は表示されません。その場合、すべてまたはほとんどすべてが表示されます。ファイヤーバグを使用してコードをステップ実行すると、ブラシ領域にある行が取得されていないように見えましたが、すべて（？）...そして理解できないようです。:(

誰かがこれ（特に私が変更しなければならないすべての場所とその方法）を手伝ってくれるなら、私はこれを機能させて、私が間違っていることを学びたいです：-\

4

2 に答える 2

5

順序軸をブラッシングするとピクセルが返され、定量軸をブラッシングするとドメインが返されます。

https://github.com/mbostock/d3/wiki/SVG-Controls#wiki-brush_x

スケールは通常、定量的スケールとして定義されます。この場合、範囲はスケールのドメインからのデータ空間にあります。ただし、代わりに順序スケールとして定義することもできます。この場合、エクステントはスケールの範囲エクステントからのピクセル空間にあります。

私の推測では、逆方向に作業して、ピクセルをドメイン値に変換する必要があると思います。私は同じことをしようとしているので、この質問を見つけました。私がそれを理解したら、私はあなたに知らせます。

編集: これは、開始するための素晴らしい例です。

http://philau.willbowman.com/2012/digitalInnovation/DevelopmentReferences/LIBS/d3JS/examples/brush/brush-ordinal.html

function brushmove() {
  var s = d3.event.target.extent();
  symbol.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; });
}

選択範囲 (ピクセル単位) を取得し、すべての系列要素を選択して、それらが範囲内にあるかどうかを判断します。それに基づいて要素をフィルタリングし、データキーまたはフィルターに追加する必要があるものを返すことができます。

于 2012-11-09T21:22:20.467 に答える
1

ブラッシングを使用した序数スケールの例を次に示します。

http://bl.ocks.org/chrisbrich/4173587

基本的な考え方は、@gumballhead が示唆しているように、ピクセル値を入力ドメインに投影する責任があります。この例の関連するスニペットは次のとおりです。

brushed = function(){var selected =  yScale.domain().filter(function(d){return (brush.extent()[0] <= yScale(d)) && (yScale(d) <= brush.extent()[1])});                     
                             d3.select(".selected").text(selected.join(","));}
于 2015-01-22T19:04:56.760 に答える