タグ付けされた質問 「d3.js」

960 500 svgグラフィックを作成するヒストグラムスクリプトがあるとします。これをレスポンシブにするにはどうすればグラフィックの幅と高さのサイズを動的に変更できますか？ <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < m; j++) …

224 javascript  responsive-design  d3.js 

svgチャートを含む要素を（D3.jsを使用して）作成するJavaScriptコードがあります。AJAXを使用してWebサービスからの新しいデータに基づいてグラフを更新したいのですが、問題は、更新ボタンをクリックするたびに新しいが生成さsvgれるため、古いデータを削除するか、そのコンテンツを更新することです。 以下は、私が作成するJavaScript関数のスニペットsvgです。 var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 古いsvg要素を削除したり、少なくともそのコンテンツを置き換えるにはどうすればよいですか？

200 javascript  ajax  svg  d3.js 

誰かがD3.jsのdatum（）とdata（）の違いを説明できますか？両方が使用されているのがわかりますが、なぜどちらを選ぶべきかわかりません。

199 javascript  d3.js 

私はd3.jsで散布図を描画しています。この質問の助けを借りて： 画面、現在のWebページ、ブラウザウィンドウのサイズを取得します 私はこの答えを使用しています： var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; だから私は私のプロットを次のようにユーザーのウィンドウに合わせることができます： var svg = d3.select("body").append("svg") .attr("width", x) .attr("height", y) .append("g"); ここで、ユーザーがウィンドウのサイズを変更するときに、何かがプロットのサイズ変更を処理するようにしたいと思います。 PS：コードでjQueryを使用していません。

183 javascript  d3.js 

散布図にプロットする一連のデータがあります。円の1つにマウスカーソルを合わせると、データ（x、yの値など）がポップアップ表示されます。これが私が使ったものです： vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(d.x);}) .attr("cy", function(d) {return y(d.y)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return d.x;}) .attr("x", function(d) {return x(d.x);}) .attr("y", function (d) {return y(d.y);}); }); 入力するデータについてもっと情報を提供する必要があると思いますか？

162 tooltip  mouseover  d3.js 

現在d3では、描画するgeoJSONオブジェクトがある場合、それをスケーリングし、必要なサイズに変換して中央に配置する必要があります。これは非常に退屈な試行錯誤の仕事であり、これらの値を取得するためのより良い方法を誰かが知っているかどうか疑問に思っていましたか？ たとえば、このコードがある場合 var path, vis, xy; xy = d3.geo.mercator().scale(8500).translate([0, -1200]); path = d3.geo.path().projection(xy); vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600); d3.json("../../data/ireland2.geojson", function(json) { return vis.append("svg:g") .attr("class", "tracts") .selectAll("path") .data(json.features).enter() .append("svg:path") .attr("d", path) .attr("fill", "#85C3C0") .attr("stroke", "#222"); }); 少しずつ行かずに.scale（8500）と.translate（[0、-1200]）を取得するにはどうすればよいですか？

140 d3.js  geojson  topojson 

私は初めてです D3.js、今日だけ学習を始めました 私はドーナツの例を見て、このコードを見つけました var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); ドキュメントを検索しましたが、何が理解できませんでした.append("g")が追加 でも D3特定のものですか？ ここでガイダンスを探しています

129 javascript  d3.js 

ユーザーがクリックした後、その周りに選択マーカーを描画する必要があるため、任意のg要素の幅と高さを正確に知る必要SVGがあります。 私がインターネットで見たのは次のようなものですd3.select("myG").style("width")。問題は、要素に常に明示的な幅属性が設定されているとは限らないことです。たとえば、内に円を作成すると、幅の代わりにg半径（r）が設定されます。でwindow.getComputedStyleメソッドを使用しても、circle「auto」が返されます。 で任意のsvgselementの幅を計算する方法はありD3ますか？ ありがとうございました。

120 javascript  d3.js 

私は、ズーム可能なパン可能なグラフで基本的に何千ものポイントをレンダリングするプロジェクトを更新するために使用する適切なテクノロジーを選択しようとしています。Protovisを使用した現在の実装は、パフォーマンスが低いです。ここでそれをチェックしてください： http://www.planethunters.org/classify 完全に縮小すると約2000ポイントになります。下部のハンドルを使用して少し拡大し、ドラッグして移動します。あなたはそれがかなり途切れ途切れであり、あなたが本当に速いコンピュータを持っていない限り、あなたのCPU使用率はおそらく1つのコアで100％に上がることがわかります。フォーカスエリアへの変更ごとにprotovisへの再描画が呼び出されますが、これはかなり遅く、描画されるポイントが多いほど悪くなります。 インターフェースにいくつかの更新を加え、基礎となる視覚化テクノロジーを変更して、アニメーションとインタラクションの応答性を高めたいと思います。次の記事から、別のSVGベースのライブラリか、キャンバスベースのライブラリを選択するように見えます。 http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ Protovisから生まれたd3.jsはSVGベースであり、アニメーションのレンダリングに優れているはずです。ただし、パフォーマンスの上限がどれほど優れているかについては疑問です。そのため、KineticJSのようなキャンバスベースのライブラリを使用して、より完全なオーバーホールも検討しています。ただし、1つのアプローチを使い始める前に、これだけ多くのデータを使用して同様のWebアプリケーションを実行した人からの意見を聞き、意見を聞きたいと思います。 最も重要なのはパフォーマンスです。2番目の焦点は、他の対話機能の追加とアニメーションのプログラミングの容易さにあります。おそらく、一度に2000ポイントを超えることはなく、それぞれに小さなエラーバーがあります。ズームイン、ズームアウト、パンニングはスムーズである必要があります。最新のSVGライブラリがこれで適切な場合、おそらくd3の使いやすさはKineticJSなどの設定の増加よりも優先されます。ただし、キャンバスを使用することで、特に低速のコンピューターを使用する人にとって、パフォーマンスに大きな利点がある場合は、間違いなくその方法を好むでしょう。 NYTimesが作成した、SVGを使用しているが、順調にスムーズにアニメーション化するアプリの例：http : //www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。そのパフォーマンスが得られ、独自のキャンバス描画コードを記述する必要がない場合は、おそらくSVGを使用します。 一部のユーザーは、キャンバスレンダリングと組み合わせたd3.js操作のハイブリッドを使用していることに気付きました。しかし、私はこれについてオンラインで多くのドキュメントを見つけることができないか、その投稿のOPに連絡することができません。このようなDOM-to-Canvas（デモ、コード）の実装を経験したことがある方は、ぜひご連絡ください。データを操作できることと、データのレンダリング方法（したがってパフォーマンス）をカスタム制御できることの良いハイブリッドのようですが、すべてをDOMにロードしなければならない場合でも、処理が遅くなるのではないかと思います。 これに似た既存の質問がいくつかあることは知っていますが、まったく同じことを尋ねる質問はありません。ご協力いただきありがとうございます。 フォローアップ：私が最終的に使用した実装はhttps://github.com/zooniverse/LightCurvesにあります

114 html  canvas  svg  d3.js  kineticjs 

誰でもインタラクティブなグラフの視覚化を行えるPythonライブラリを推奨できますか？ 具体的にはd3.jsのようなものが必要ですがpython、理想的には3Dも必要です。 私は見ました： NetworkX-Matplotlibプロットのみを行い、それらは2Dのようです。d3.jsノードを引き寄せるなどのインタラクティブ性はありませんでした。 グラフツール -2Dプロットのみを実行し、非常に遅い対話型グラフを使用します。

110 python  graph  d3.js  graph-tool 

svgのx属性とdx属性（またはyとdy）の違い​​は何ですか？軸シフト属性（dx）と場所属性（x）を使用する適切なタイミングはいつですか？ たとえば、私はこのようなことをしているd3の多くの例に気づきました chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") 以下が同じことをしているように思われる場合、yとdyの両方を設定する利点または理由は何ですか？ chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

106 svg  d3.js 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 6年前休業。 この質問を改善する 見てD3.js興味があったのでこの本を買いました！私は間違っているかもしれませんが、それは満足のいくものではありませんでした。 誰もがD3.jsデータ可視化のマスタリングのための優れた資料を持っていますか？ 私は多くの可能性を見ることができ、D3.js非常に熱心で興味があります。 前もって感謝します！ 更新： Scott Murray著のInteractive Data Visualization for the Webを読み終えました。お試しください。無料です。

104 javascript  d3.js  data-visualization 

この例を参照してください： http://vallandingham.me/stepper_steps.html D3とjQueryライブラリは、どちらもオブジェクトチェーン方式でDOM操作を行うという意味で非常に似ているようです。 D3がjQueryよりも簡単に、そしてその逆の場合にどの関数が使用できるのか知りたいです。jQueryをベースとして使用するグラフ作成ライブラリーと視覚化ライブラリーはたくさんあります（たとえば、ハイチャート、 浮かぶ、 Wijmo）。 それらの違いの具体例を教えてください。

103 javascript  jquery  d3.js 

D3.jsを使用してFadeOutメソッド（jQueryに類似）を作成する必要があります。を使用して、不透明度を0に設定する必要がありtransition()ます。 d3.select("#myid").transition().style("opacity", "0"); 問題は、トランジションがいつ終了したかを認識するためのコールバックが必要なことです。コールバックを実装するにはどうすればよいですか？

98 javascript  d3.js  transition 

d3の軸にテキストラベルを追加するにはどうすればよいですか？ たとえば、x軸とy軸を持つ単純な線グラフがあります。 私のx軸には1〜10の目盛りがあります。その下に「日」という単語を表示して、x軸が日数を数えていることを人々に知らせます。 同様に、y軸には目盛りとして1〜10の数字があり、「食べたサンドイッチ」という単語を横向きに表示します。 これを行う簡単な方法はありますか？

94 javascript  d3.js  axis-labels