d3.jsグラフ外の伝説を取得

Question

グラフ領域の外に私のグラフの凡例を取得しようとしています。ここで

余白されています

var margin = {top: 50, right: 200, bottom: 50, left: 40}; 
     var width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

まず私は、SVGを作成します。

var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

だから、私の理解から、私は今保持して、それの内部SVGのcanvas要素とAGを持っていますチャート。私は右の余白に多くを追加しようとしているので、グラフを保持しているsvgキャンバスとそれに追加されたgの間にいくらかのスペースを確保できます。それから私はその空の空間に私の伝説を入れたいです。

//add legend 
      var legend = svg.append("g") 
       .attr("class", "legend") 
       .attr("height", 300) 
       .attr("width", 200) 
       .attr("transform", "translate(-1000,50"); 

私は、それはSVG要素内グラムに追加されたSVG要素に追加していますにもかかわらず：私は私の凡例を追加するのはここ

です。だから、どれほど翻訳しても、それを画面上でもっと右に向けるようにしても、内側のgの幅を過ぎることはありません。

トラブルシューティング時に、外側のSVG要素の高さが960で、幅が500であることがわかります。それに追加されたgは、変換/変換が40,50です。幅は839pxで433.223pxになります（これはわかりません）。外側のSVGは、マージンのために今すぐスペースの束を持っています。

私はsvgに追加されたgの幅を増やして、私の伝説を子供のgとマージンによって作成された空のスペースに移動します。または、最初のgの兄弟であるもう1つのgを作成しようとしていて、次に余白で作成された空のスペースを使用できます。

私は仕事をすることができず、どちらの方法が最良かわかりません。

Answer 1

VAR svgが<svg>

svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") // <-- This is what svg is currently being assigned to 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

それで内部にネスト<g>に割り当てられていることに注意してください、あなたは後でvar legend = svg.append("g")を実行するとき、あなたは実際には、前述の<g>の子として凡例を追加しています。そして、それはあなたが開発ツールで見ていることです。

一つ意味はtranslate()を使用すると、外側<g>に適用し変換することである（legendのinnter <g>のすなわち翻訳が外側<g>のものに追加される）内<g>に影響を与えます。

var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom); 

var inner = svg.append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

その後innerではなくsvgに、既存のグラフを描画するためにコードを変更：

多分、あなたはそうのようなものを分割します。

その結果、var legend = svg.append("g")はinnerの兄弟として凡例を追加します、そしてあなたがlegendに適用される変換は、SVGの左上からの相対になりますが（marginで翻訳されてinnerの左上のとは対照的に）

そして、あなたがそうのようなlegendを翻訳したいそう：

var legend = svg.append("g") 
       .attr("transform", "translate(" + width - margin.right + "," + margin.top + ")"); 

右図の終わり、MINUS margin.rightに凡例を移動します。そうすれば、legendのための十分な部屋を作るためにmargin.rightを調整することができます。

最後に、SVG <g>ため、明示的に幅と高さを設定する方法がないため

legend 
    .attr("height", 300) 
    .attr("width", 200) 

を呼び出すと、何もしないことに注意してください。とにかく、svgにはhtmlレイアウトの "フロー"動作がないので、これらはあまり意味がありません。開発ツールに表示されている幅と高さは、 <g>の子の境界から生じる暗黙の境界です。 （必要に応じて、 getBBox()関数を使用して、javascriptで計算された範囲を取得する方法があります）。

Answer 2

あなたが実際にあなたが伝説の変数を取得するにはD3を言っているこの行の
var legend = svg.append("g")

、代わりに「SVG」の、あなたのグループ「G」に伝説のVARを装着している、あなたが提供されたコードを見て

var legend = svg.selectAll(".legend") 
.enter().append("g") 

は、あなたの伝説のための別のグループ「G」を作成するには：私が正しく理解すれば、あなたがこのような何かを試してみてください、SVGに追加される「G」へ。 私の悪い英語をお詫び申し上げます。