D3を使用して、水平伝説ここに（<a href="http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend" rel="nofollow noreferrer">http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend</a>）コードに基づいて、右側に

Question

を遮断します、私は水平伝説..以下

コードを作成しました。.. jsfiddle

 (function(d3) { 
     'use strict'; 

     var dataset = [{ 
      "colorName":"red", 
      "hexValue":"#f00" 
     }, 
     { 
      "colorName":"green", 
      "hexValue":"#0f0" 
     }, 
     { 
      "colorName":"blue", 
      "hexValue":"#00f" 
     }, 
     { 
      "colorName":"cyan", 
      "hexValue":"#0ff" 
     }, 
     { 
      "colorName":"magenta", 
      "hexValue":"#f0f" 
     }, 
     { 
      "colorName":"yellow", 
      "hexValue":"#ff0" 
     }, 
     { 
      "colorName":"black", 
      "hexValue":"#000" 
     } 
    ] 

     var width = 360; 
     var height = 360; 
     var legendRectSize = 18;         // NEW 
     var legendSpacing = 4;         // NEW 


     var svg = d3.select('#chart') 
      .append('svg') 
      .attr('width', width) 
      .attr('height', height) 
      .append('g'); 


     var legend = svg.selectAll('.legend')      // NEW 
      .data(dataset)         // NEW 
      .enter()            // NEW 
      .append('g')           // NEW 
      .attr('class', 'legend')        // NEW 
      .attr('transform', function(d, i) {      // NEW 
        // var height = 0;   // NEW 
      var horz = 100*i;      // NEW 
      var vert = 6;      // NEW 
      return 'translate(' + horz + ',' + vert + ')';  // NEW 
      });              // NEW 

     legend.append('rect')          // NEW 
      .attr('width', legendRectSize)       // NEW 
      .attr('height', legendRectSize)       // NEW 
      .style('fill', function (d, i) { 
     return d.hexValue; 
    })         // NEW 
      .style('stroke', function (d, i) { 
     return d.hexValue; 
    });        // NEW 

     legend.append('text')          // NEW 
      .attr('x', legendRectSize + legendSpacing)    // NEW 
      .attr('y', legendRectSize - legendSpacing)    // NEW 
      .text(function(d) {return d.colorName; });      // NEW 

     })(window.d3); 

しかし、それはカットします適切なサイズでオフにします。使用可能な幅が凡例の幅よりも小さい場合は、次の行に移動するようにするにはどうすればよいですか。

また、私はこの質問（How to create a horizontal legend with d3.js）を見てきましたが、私の場合は同じように使用する方法を理解することができませんでした。 誰かが私のコードのようにハードコード幅（カラーボックス+テキスト）を保証しない方法を教えてくれれば幸いです。

Answer 1

これはあなたの現在の問題は、しかし、あなたはそれがより多くのあなたが持っている場合は3行本である必要は伝説が動作しない可能性があることに関して、自動化されないはずです解決する必要がありますあなたの関数を翻訳

 .attr('transform', function(d, i) {     
      var horz = 100*i;      // NEW 
      var vert = 6;  
      if (horz >= width) { 
       horz = 100 * (i - 4); 
       vert = 40; 
      } 

     return 'translate(' + horz + ',' + vert + ')';  // NEW 
     }); 

内部の場合は、以下を追加します。あなたのために。

これが役に立ちます。