web-dev-qa-db-ja.com

NVD3チャートの凡例の位置を変更するにはどうすればよいですか？

グラフ自体に対して、NVD3チャートの凡例を再配置する方法を知っている人はいますか？

デフォルトでは上にあり、横に配置したい（アプリ内のスペースをより有効に使用する）

私がやりたいことの例： enter image description here

chartsd3.jslegendnvd3.js
15
user2541050

これを行うオプションはAFAIKにはありませんが、凡例を含むg要素を手動で選択して移動できます。

d3.select(".nv-legendWrap")
  .attr("transform", "translate(100,100)");
12
Lars Kotthoff

これを書いている時点（2015年7月2日）nvd3は、凡例を円グラフの右側に配置することをサポートしています。

グラフを初期化するときは、legendPositionをrightに設定します。

例：

nv.addGraph(function() {
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })          
      .legendPosition("right");


    svg.datum(piedata).call(chart);

  return chart;
});

http://nvd3-community.github.io/nvd3/examples/documentation.html#pieChart を参照してください

12
Michael

JSファイル自体を編集することにより、nvd3チャートモデルの凡例の位置を永続的に変更できます。これは、初期化に位置を含めるよりも、グラフの更新に適しています。 JS（multiBarChart.jsやlineChart.jsなど）でg.select('.nv-legendWrap')を検索します。 .attrはその直後に定義されます。これを次のものに置き換えます。

.attr('transform', 'translate(10,270)')

10はx値で、凡例はシフトされ、270はy値がシフトされます。

5
Brian Hogan

私はlineChartで同じ問題を解決しようとしています。最初に私はちょうど追加しました

d3.select('.nv-legendWrap').attr('transform', 'translate(0, 475)')

ただし、グラフのサイズを変更すると、デフォルトに戻ります。そのため、この行もコピーして、windowResize（）関数内に追加しました。しかし、凡例をクリックして行を非表示/表示すると、デフォルトの位置に戻ります。

最善の解決策は、jsファイルを編集することかもしれません。

グラフ化に関しては、簡単な解決策はないようです。 NVD3.jsのドキュメントは非常に不足していて制限されています。しかし、D3.jsは巨大で複雑でもあります。使いやすさとカスタマイズの両方を実現することはできず、どちらかをあきらめる必要があります。

pdate：少しだけ移動する必要がある場合は、次の操作を行うだけです。

chart.legend.margin({top: 0, right: 0, left: 0, bottom: 20})
3
Evan Butler

凡例のドキュメントはここにあります： http://nvd3-community.github.io/nvd3/examples/documentation.html#legend

例として：

chart.legend.rightAlign(false);
1
Androido

chart.legend.marginを調整できます。 top、right、left、bottomを属性として持っています。

1
user3898336