2016-08-15 6 views
1

私はプロジェクトAは、D3のキャンバスにD3のSVGでやったポートに苦労しています、私が持っているもの基本的にブラッシングを経由してフォーカス+コンテキストで、それは古典的な例http://bl.ocks.org/mbostock/1667367のスピンオフだ、と私はシンプル持っています面チャートの代わりに折れ線グラフを使用していますが、原理はまったく同じです。D3のキャンバスブラシ/選択

ここで、折れ線グラフをolggood svg d3アプローチから新しいキャンバス駆動方法に変換することに成功しました。ちょうど明確にする:

   ctx.beginPath(); 
       draw_line.context(ctx)(data); 
       ctx.lineWidth = 0.6; 
       ctx.strokeStyle = "rgb(26,188,156)"; 
       ctx.stroke(); 

それは私達が話しているものです。

私はキャンバスドメインに入っているので、 "svg関連"のものは、 "svg関連の"ものがすべてsvgから引き出された "g"オブジェクトに中継されているため、そのような理由で、「ブラシ」などのものは、もはや働いていないように見えます。

私は、スクロールやそのようなもの(例えばhttp://bl.ocks.org/jgbos/9752277)をズームする例を見てきましたが、キャンバスでもスクロールイベントを簡単に検出できることがわかりましたが、まったく同じ私が以前に持っていたアプローチ(ブラッシングアプローチによるフォーカス+コンテキスト)

d3でキャンバスで作業を完了させるための回避策はありますか?

+0

を 'd3'ブラシがAであります**コントロール**はSVGで作成されているので、使用するにはいくつかのSVGコンポーネントが必要です。あなたの最終目標は何ですか?なぜあなたはSVGから離れるのですか?非常に複雑な(つまりメモリ集約的な)視覚化をしていない限り、キャンバスにはいろいろな点で優れています。私はあなたがいつもこの2つを混ぜることができたと思う[例](http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e) – Mark

+2

うん、私は2つを混合してしまった、そして再び、私はキャンバスが必要だ大量のデータを扱う。ちょうど記録のために、2つのもののブレンドそれは本当の痛みのお尻:) – holographix

+2

私は移動した巨大なデータのために、私は同じ問題に直面しているので、あなたがSVGとキャンバスをブレンドした結局どのようにあなたの仕事の謎を作ることができますキャンバスと今私はブラッシングのアプローチを介してフォーカス+コンテキストをしたい。 – Achilles

答えて

関連する問題