web-dev-qa-db-ja.com

d3軸のラベル付け

D3の軸にテキストラベルを追加するにはどうすればよいですか？

たとえば、x軸とy軸を持つ単純な折れ線グラフがあります。

私のx軸には、1から10までの目盛りがあります。x軸が日を数えていることを人々が知っているように、単語「days」をその下に表示したいです。

同様に、y軸には目盛りとして1〜10の数字があり、「サンドイッチを食べました」という言葉を横に表示したいです。

これを行う簡単な方法はありますか？

javascriptd3.jsaxis-labels
90
user1474218

軸ラベルはD3の 軸コンポーネント に組み込まれていませんが、SVG text要素を追加するだけで自分でラベルを追加できます。これの良い例は、Gapminderのアニメーション化されたバブルチャートを再現したことです The Wealth＆Health of Nations 。 x軸のラベルは次のようになります。

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

そして、このようなy軸のラベル：

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

また、スタイルシートを使用して、これらのラベルを好きなようにまとめて（.label）または個別に（.x.label、.y.label）スタイルすることもできます。

157
mbostock

新しいD3jsバージョン（バージョン3以降）では、d3.svg.axis()関数を介してチャート軸を作成すると、関数内に組み込まれているtickValuesおよびtickFormatと呼ばれる2つのメソッドにアクセスできます。目盛りを必要とする値と、テキストを表示する形式を指定できます。

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");
30
ambodi

私がしたように、y軸の真ん中にy軸のラベルが必要な場合：

  1. テキストアンカー中央でテキストを90度回転
  2. テキストをその中間点で翻訳します
    • x位置：y軸の目盛りラベルの重複を防ぐため（-50）
    • y位置：y軸の中点に一致する（chartHeight / 2）

コードサンプル：

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

これにより、上記のlubarで述べたように、座標系全体が回転するのを防ぎます。

12
Michael Clark

D3は、チャートの組み立てに使用できる非常に低レベルのコンポーネントセットを提供します。ビルディングブロック、軸コンポーネント、データ結合、選択、およびSVGが提供されます。それらをまとめてチャートを作成するのはあなたの仕事です！

従来のチャート、つまり、軸、軸ラベル、チャートのタイトル、プロットエリアのペアが必要な場合は、 d3fc ？より高レベルのD3コンポーネントのオープンソースセットです。必要なデカルトチャートコンポーネントが含まれています。

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

ここでより完全な例を見ることができます： https://d3fc.io/examples/simple/index.html

1
ColinE

提案されているように、d3.v4で作業する場合、このインスタンスを使用して必要なものをすべて提供できます。

X軸のデータを「日数」に置き換えるだけですが、連結を適用せずに文字列値を正しく解析することを忘れないでください。

parseTimeは、日付形式でスケーリングする日のトリックを行うこともできますか？

d3.json("data.json", function(error, data) {
if (error) throw error;

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

グローバルCSS/jsをいじる

1
因特网的小熊
chart.xAxis.axisLabel('Label here');

または

xAxis: {
   axisLabel: 'Label here'
},
0
Ravi Tej