7

NVD3.js のグラフにタイトル テキストを追加したいと考えています。

私は次のことを試しました、

nv.addGraph(function() {
var chart = nv.models.linePlusBarWithFocusChart()
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .x(function(d,i) { return i })
    .color(d3.scale.category10().range());

chart.append("text")
    .attr("x", 200)             
    .attr("y", 100)
    .attr("text-anchor", "middle")  
    .text("Sample Charts");
}

(強調表示) D3.js では機能しますが、NVD3.js では機能しません。私は空白のページを取得しています..

次の画像のようにチャートの上にテキストを配置したい（ペイントで作成されたもの）

ここに画像の説明を入力

どうすればこれを達成できますか？

4

3 に答える 3

13

D3 を使用してコンテナー SVG を選択し、タイトルを追加できます。

d3.select('#chart svg')
  .append("text")
  .attr("x", 200)             
  .attr("y", 100)
  .attr("text-anchor", "middle")  
  .text("Sample Charts");

これは、NVD3 の例と同じ ID などを SVG に使用していることを前提としています。そうでない場合は、それに応じてセレクターを調整してください。

于 2013-05-09T10:31:07.313 に答える
2

別のアプローチをとって、グラフのレイアウトとスタイルをより適切に制御したかったので、<svg>タグ内のテキスト要素として追加する代わりに、jQuery の助けを借りて外部にタイトルを追加しました。

var $svg = $('#chart svg');
$svg.parent().append('<div class="chart-title">Sample Charts</div>');

chart-titleタグ内のテキスト要素のスタイルにも使用できますが、svg の幅を使用して次のように値svgを設定するよりも、センタリングの方がはるかに簡単です。x

svg.append('text')
    .attr('x', width / 2)
    .attr('y', 20)
    .attr('text-anchor', 'middle')
    .attr('class', 'chart-title')
    .text('Sample Charts');
于 2013-10-09T00:54:09.853 に答える