問題タブ [bullet-chart]

D3 v2.4.2 github repository のブレット チャートの例を参照しています。

この例で何が起こっているのかを明確にするために、いくつか質問があります。

1) bulletChart 関数には、bullet.ranges = function(x) {}、bullet.markers = function(x) {} などの形式で 8 つの宣言があります。この bullet オブジェクトはどこから来たのでしょうか? ライブラリに組み込まれていますか？すでに変数範囲を関数 bulletRanges に設定していると思いましたか、それともこれら 2 つの異なる範囲変数ですか?

2)これらの機能の中で実際に何が起こっているのか?

3)最後の質問です。bulletChart 関数が実行を開始すると、実行が来ると bullet 関数の実行を開始しますか、それとも明示的な呼び出しを待ちますか? bullet(g) が明示的に呼び出されるのを実際に見たことがないからですか?

このライブラリは本当に混乱する可能性があります。どんな助けでも大歓迎です。

私はhttp://bl.ocks.org/4061961の D3.JS サイトでブレット グラフの例を使用しています。

私の目標は、Inkscape で編集するために、ブレット グラフ自体を SVG ファイルとして保存することです。phantom.js で rasterize.js の例を使用すると、コードを変更して、ブレット グラフを PNG ファイルに保存し、SVG コードをプログラムで抽出してファイルに保存することができました。以下は、SVG コードを保存する修正済みの rasterize.js ファイルです。

上記の JS は「rasterize.js」に保存され、コマンド ラインで phantomjs.exe に渡されて、SVG ファイルと PNG ファイルが作成されます。

GIST に保存されている「bullet.svg」ファイルへのリンクは次のとおりです : https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg .

ただし、現在保存されているため、このファイルは Inkscape に読み込まれません。個々の要素を 1 つのブロックに手動でラップしたため、?xml ヘッダーを追加し、svg 要素を xmlns で修正して、結果のファイルを変更しました。

私は何が欠けていますか？手動で機能させる方法を理解したら、SVG を抽出してヘッダーを書き込むコードを修正する必要があります。

きれいな SVG をプログラムで作成するために rasterize.js (上記) を変更するための他のアイデアやヒントはありますか? ありがとう！

次の 2 つの「公式」D3 ブレット チャートの例を 1 つにブレンドしようとしています。

http://bl.ocks.org/mbostock/4061961

http://boothead.github.io/d3/ex/bullet.html

前者をローカルで動作させ、後者の JS コードを「d3.chart.bullet」を「d3.bullet」に置き換えて (そして DOM オブジェクトを再参照して「ランダム化」することで)「プラグイン」することができました。イベントリスナー)。

ただし、ローカルのラベル タイプの「.ticks」呼び出しとの互換性は、そのように壊れています。理想的な世界では、等間隔の目盛りを一番下に配置し、ローカルの「データ ラベルの目盛り」を少し異なるスタイルで箇条書きの上に配置したいと考えています。

それはまったく可能ですか？D3マイナーバージョンが異なるように見えるので、私はそれを疑い始めています（nvd3互換性が必要なので、どちらもv2.xです）。それにもかかわらず、.ticks 呼び出しに依存しない「適切な」データラベルに頼るなど、目的を達成する方法について何か考えはありますか? ありがとう！

ブレット グラフをマーケティングの要望どおりにスタイルアップしようとしています。目的のグラフは次のようになります。

バーの上部にラベルを追加するにはどうすればよいですか?

Kendo Documentation から labels プロパティを設定しようとしました:

動作していないスクリプトは次のとおりです。

どんな助けでも大歓迎です。

私は D3 を初めて使用し、Glassdoor が使用するものと同様のグラフを使用して、さまざまなサービスの価格範囲 (最低価格、中央価格、最高価格) を表示したいと考えています (この例を参照してください: http://bit.ly/1koKeLL ) .

これは、左右の余白が変化する横棒グラフで、低いデータ ポイント、中央値データ ポイント、高いデータ ポイントをグラフィカルに示します。特にD3を学んでいる人にとって、これを実装する最良の方法を知っている人はいますか?

最初に power BI カスタム グラフィックスを試してください。

ブレットチャート「BulletChartbySQLBI」を編集して、ニーズを満たすことができるようにしようとしていますが、スタイリングが開発に適用された理由がわかりません。ツールのプレビューは、ダッシュボード、色、およびテキストの書式設定にインポートするときに保持されません。

+ 質問

私が抱えているもう1つの問題は、タイトルをメインバーの上に配置できないように見えるため、そこにテキストを配置できることです。cssスタイリングを使用しようとしましたが、成功せず、方法を変更しようとしましたテキストが上に表示されるようにsvgが描画されますが、成功しません。

開発されたコード: https://app.powerbi.com/devTools

データのプレビュー: SimpleGauge(シングル+カテゴリ)

誰かが私を啓発することができれば、私はそれを感謝します、乾杯

nvd3 ブレット チャートをカスタマイズしましたが、正常に動作しています。ウィンドウのサイズが変更されると問題が発生し、chart.update ハンドラーがエラーd3.js:8868 Uncaught TypeError: Cannot read property '1' of undefinedを作成するため、コード コントロールはチャート関数を再度実行しません。助けてください。