プログラミング d3.js

5

（D3.jsを使用して）一連のsvg長方形があり、マウスオーバーでメッセージを表示したいのですが、メッセージは背景として機能するボックスで囲まれている必要があります。それらは両方とも、互いに完全に位置合わせされ、長方形（上部と中央）に完全に位置合わせされている必要があります。これを行うための最良の方法は何ですか？「x」、「y」、「width」、「height」属性を使用してsvgテキストを追加してから、svgrectを付加してみました。問題は、テキストの参照点が中央にあることです（中央に揃えたいので、使用しましたtext-anchor: middle）が、長方形の場合は左上の座標であり、テキストの周りに少しマージンが必要でした。痛み。もう1つのオプションは、html divを使用することでした。これは、テキストとパディングを直接追加できますが、各長方形の絶対座標を取得する方法がわからないためです。これを行う方法はありますか？

91 javascript svg d3.js tooltip

1

Force-directedレイアウトに新しいノードを追加する

Stack Overflowの最初の質問なので、我慢してください！私はd3.jsを初めて使用しましたが、他の人がそれを使って達成できることに一貫して驚かされています...そして、私が自分でどれほどの進歩を遂げることができたかに驚かされています！明らかに私は何かを壊していないので、私はここの親切な魂が私に光を見せてくれることを願っています。私の意図は、単に以下を実行する再利用可能なJavaScript関数を作成することです。指定されたDOM要素に空の有向グラフを作成しますラベル付けされた画像を含むノードをそのグラフに追加および削除し、それらの間の接続を指定できます。私はhttp://bl.ocks.org/950642を出発点として採用しました。これは、本質的に、私が作成したい種類のレイアウトだからです。私のコードは次のようになります： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="d3.v2.min.js"></script> <style type="text/css"> .link { stroke: #ccc; } .nodetext { pointer-events: none; font: 10px sans-serif; } body { width:100%; height:100%; margin:none; padding:none; } #graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; } …

89 javascript d3.js force-layout

3

GeoJSONとTopoJSONの違い

GeoJSONとTopoJSONの違いは何ですか？いつ使用するのですか？ GitHubでのTopoJSONの説明は、TopoJSONファイルが80％小さいことを意味します。では、TopoJSONをいつも使ってみませんか？

89 d3.js gis geojson topojson

1

D3 javascriptforeachとそれぞれの違い

D3jsforEachとの違いは何eachですか？

88 javascript d3.js

4

d3.jsとchart.jsの比較（チャートのみ）[クローズ]

クローズ。この質問はもっと焦点を合わせる必要があります。現在、回答を受け付けていません。この質問を改善したいですか？質問を更新して、この投稿を編集するだけで1つの問題に焦点を当てるようにします。昨日休業。この質問を改善するプロジェクトでchart.jsを数回使用しましたが、d3.jsを使用したことはありません。多くの人がd3.jsがチャートに最適なjavascriptフレームワークであると言いますが、特にchart.jsとの比較が必要な場合は、その理由を説明できません。私はこれを見つけました：http：//www.fusioncharts.com/javascript-charting-comparison/ しかし、それは私が探していたものではありません。使いやすさとパフォーマンス（グラフのみ）の観点から、これらのフレームワークの比較について知っている人はいますか？

88 javascript d3.js charts chart.js

5

ノードからすべての子要素を削除してから、異なる色とサイズで再度適用するにはどうすればよいですか？

したがって、ノード、リンク、その他の要素を設定するための次の力レイアウトグラフコードがあります。 var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", …

87 d3.js force-layout

3

Protovis vs D3.js

TLDR：protovisとD3.jsの両方の経験があり、両者の違いを明らかにした人はいますか？私は過去2週間プロトビスで遊んでいて、これまでのところ素晴らしいです。今を除いて、私はアニメーションで少しレンガの壁にぶつかったようです。プロトビス：http：//vis.stanford.edu/protovis/ 非常に単純なアニメーションを作成したいのですが、protovisを使用すると、直感的ではないように感じます。protovisは実際にはアニメーション用ではなかったと思い始めています。それで、私はD3.jsを見始めました： http://mbostock.github.com/d3/ex/stack.html 見た目は非常に似ていますが、次のようになります。より軽量のようです SVGだけでなく他のDOM要素との相互作用を対象としているようですアニメーションの追加を対象としているようです誰かが他の違いを明らかにすることはできますか？私はすべての入力に非常に感謝します

84 javascript protovis d3.js

2

d3.scale.category10（）に相当するd3.js v4.0とは何ですか？

Interactive Web Visualizationの本でd3を学ぼうとしていますが、バージョン4.0では多くの変更がありました。私が本当に理解できないことの1つは、色への簡単なマッピングを取得するためのd3.scale.category10（）に相当するものがあるかどうかです。新しいバージョンにはそのようなものがありますか、それともmath.randomを使用して自分で何かをコーディングする必要がありますか？

82 d3.js

10

D3でSVG要素のZインデックスを更新する

D3ライブラリを使用してSVG要素をzオーダーの最上位に移動する効果的な方法は何ですか？私の特定のシナリオは、マウスが特定の部分の上にあるときに（にを追加strokeしてpath）強調表示する円グラフです。チャートを生成するためのコードブロックは次のとおりです。 svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); }) .attr("stroke", "#fff") .attr("stroke-width", 0) .on("mouseover", function(d) { d3.select(this) .attr("stroke-width", 2) .classed("top", true); //.style("z-index", 1); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke-width", 0) .classed("top", false); //.style("z-index", -1); }); 私はいくつかのオプションを試しましたが、今のところ運がありません。両方の使用style("z-index")と呼び出しclassedは機能しませんでした。「トップ」クラスは、私のCSSでは次のように定義されています。 .top { fill: red; z-index: 100; } …

81 javascript svg d3.js

3

d3のx軸テキストを回転します

私はd3とsvgのコーディングに不慣れで、グラフのxAxis上でテキストを回転させる方法を探しています。私の問題は、通常、xAxisのタイトルが棒グラフの棒よりも長いことです。そのため、テキストを回転させて、xAxisの下で（水平ではなく）垂直に実行することを検討しています。変換属性を追加してみました：.attr（ "transform"、 "rotate（180）"）しかし、そうすると、テキストが完全に消えてしまいます。svgキャンバスの高さを上げようとしましたが、それでもテキストを表示できませんでした。私が間違っていることについての考えは素晴らしいでしょう。xとyの位置も調整する必要がありますか？そして、もしそうなら、どれだけ（Firebugでそれを見ることができるときにトラブルシューティングするのは難しい）。

81 text svg transform d3.js

6

D3力レイアウトグラフにズームインする方法はありますか？

D3には、ここに力指向のレイアウトがあります。このグラフにズームを追加する方法はありますか？現在、マウスホイールイベントをキャプチャすることはできましたが、再描画関数自体の記述方法がよくわかりません。助言がありますか？ var vis = d3.select("#graph") .append("svg:svg") .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function .attr("width", w) .attr("height", h);

80 javascript jquery d3.js zoom force-layout

8

CSV列を階層関係に変換する方法はありますか？

分類レベルが列になっている700万の生物多様性レコードのcsvがあります。例えば： RecordID,kingdom,phylum,class,order,family,genus,species 1,Animalia,Chordata,Mammalia,Primates,Hominidae,Homo,Homo sapiens 2,Animalia,Chordata,Mammalia,Carnivora,Canidae,Canis,Canis 3,Plantae,nan,Magnoliopsida,Brassicales,Brassicaceae,Arabidopsis,Arabidopsis thaliana 4,Plantae,nan,Magnoliopsida,Fabales,Fabaceae,Phaseoulus,Phaseolus vulgaris D3でビジュアライゼーションを作成したいのですが、データ形式はネットワークである必要があり、列の異なる値はそれぞれ、特定の値の前の列の子です。私はcsvからこのようなものに行く必要があります： { name: 'Animalia', children: [{ name: 'Chordata', children: [{ name: 'Mammalia', children: [{ name: 'Primates', children: 'Hominidae' }, { name: 'Carnivora', children: 'Canidae' }] }] }] } 1000のforループを使用せずにこれを行う方法については、思いつきませんでした。誰かがこのネットワークをpythonまたはjavascriptで作成する方法について提案がありますか？

27 javascript python d3.js data-visualization hierarchical-data

1

楕円エンベロープデータのD3マップの作成

楕円、より具体的には楕円「エンベロープ」を含むこのデータセットがあります。これらがD3マップにどのように描画できるかについて誰かがアドバイスをくれたのではないかと思っていました。メルカトル図法を使用したマップ設定をすでに持っています。このstackoverflowの回答にはcreateEllipse関数があり、これにより近づきましたが、データを正しく解釈していることを確認したいと思います。データから楕円の主軸/副軸の値を差し込み、回転に方位角を使用しましたが、これは正しいでしょうか？「封筒」の部分もよくわかりません。各ゾーンのいくつかの楕円はどのようにして単一の連続した形状を作成しますか？任意のアドバイスをいただければ幸いです。 const margin = {top:0, right:0, bottom:0, left:0}, width = 1000 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const svg = d3.select('body') .append('svg') .attr('width', '100%') .attr('height', '100%') .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`); const chart = svg.append('g') …

16 javascript d3.js geospatial

3

d3 2つの個別のズーム動作を同期する

次のd3 / d3fcチャートがあります https://codepen.io/parliament718/pen/BaNQPXx グラフには、メイン領域のズーム動作とy軸の個別のズーム動作があります。y軸をドラッグして再スケーリングできます。私が解決できない問題は、y軸をドラッグして再スケーリングし、その後チャートをパンした後、チャートに「ジャンプ」があることです。明らかに、2つのズーム動作は切断されており、同期する必要がありますが、これを修正しようと頭を悩ませています。 const mainZoom = zoom() .on('zoom', () => { xScale.domain(t.rescaleX(x2).domain()); yScale.domain(t.rescaleY(y2).domain()); }); const yAxisZoom = zoom() .on('zoom', () => { const t = event.transform; yScale.domain(t.rescaleY(y2).domain()); render(); }); const yAxisDrag = drag() .on('drag', (args) => { const factor = Math.pow(2, -event.dy * 0.01); plotArea.call(yAxisZoom.scaleBy, factor); …

11 d3.js d3fc

1

Uncaught TypeError：t.rgbは関数ではありません

Uncaught TypeError：t.rgbは関数ではありません Angularアプリケーションを作成してビルドし、それを提供しようとしています $ ng serve --prod --aot これにより、コンソールで次のエラーが発生します Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) アプリケーションが表示されない --prodフラグ（フラグ）を縮小しないでアプリケーションをビルドすると、機能します。 D3を使用しているときにのみこの問題が発生します …

10 javascript angular d3.js

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

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