如何使用D3.js改變圖例的位置

Question

我使用dimple.js繪製了一個條形圖，現在我正在嘗試使用d3.js繪製圖例。現在，我能夠得出的傳說，但傳說中的文本是重疊的，我需要它是否重疊在下傳奇，也是我需要顯示只有2成一排的傳說包裹圖例文本。但現在由於空間的原因，第三個傳說是隱藏的。所以我需要把第三行中的第三個傳說。

http://jsfiddle.net/keshav_1007/qgn9gaec/3/ - 這裏是我的小提琴提前

var yMax = 1.2; 
var svg1 = dimple.newSvg("body", 360, 360); 
var dataChart = [{ 
    "Brand": "Aaaaaaaaaaaaaaaaaaaaaa", 
     "Day": "Mon", 
     "SalesVolume": 10 
}, { 
    "Brand": "Bbbbbbbbbbbbbbbbbbbb", 
     "Day": "Mon", 
     "SalesVolume": 20 
}, 
       { 
    "Brand": "Ccccccccccccccccc", 
     "Day": "Mon", 
     "SalesVolume": 20 
}]; 
var myChart = new dimple.chart(svg1, dataChart); 
myChart.setBounds(120, 10, 200, 200) 
var dummy = ['aaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb','c']; 
var x = myChart.addCategoryAxis("x", "Day"); 
var y = myChart.addPctAxis("y", "SalesVolume"); 
y.overrideMax = yMax; 
y.addOrderRule("SalesVolume"); 
var s = myChart.addSeries("Brand", dimple.plot.bar); 
s.barGap = 0.7; 
var horz = 0; 
var legendRectSize = 18; 
var legendSpacing = 4; 
var legend = svg1.selectAll('.legend') 
      .data(dataChart) 
      .enter() 
      .append('g') 
      .attr('class', 'legend') 
      .attr('transform', function(d, i) { 
      var height = legendRectSize + legendSpacing; 
      var offset = 120; 
      horz = horz + offset; 
      var vert = i * height - offset; 
      return 'translate('+horz+',260)'; 
      }); 
      legend.append('rect') 
      .attr('width', legendRectSize) 
      .attr('height', legendRectSize) 
      .style('fill', '#333333') 
      .style('stroke', '#333333'); 
     legend.append('text') 
      .attr('x', legendRectSize + legendSpacing) 
      .attr('y', legendRectSize - legendSpacing) 
      .text(function(d,i) { 
      console.log(dataChart[i].Brand); 
          return dataChart[i].Brand; }); 
myChart.draw(); 

感謝。

Answer 1

此演示可能會有所幫助。我以固定長度拼接了長文本（這裏是10），並計算了每三個圖例的y位置。

var yMax = 1.2; 
 
var svg1 = dimple.newSvg("body", 360, 860); 
 
var dataChart = [{ 
 
    "Brand": "Aaaaaaaaaaaaaaaaaaaaaa", 
 
     "Day": "Mon", 
 
     "SalesVolume": 10 
 
}, { 
 
    "Brand": "Bbbbbbbbbbbbbbbbbbbb", 
 
     "Day": "Mon", 
 
     "SalesVolume": 20 
 
}, 
 
       { 
 
    "Brand": "Ccccccccccccccccc", 
 
     "Day": "Mon", 
 
     "SalesVolume": 20 
 
}]; 
 
var myChart = new dimple.chart(svg1, dataChart); 
 
myChart.setBounds(120, 10, 200, 200) 
 
var dummy = ['aaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb','c']; 
 
var x = myChart.addCategoryAxis("x", "Day"); 
 
var y = myChart.addPctAxis("y", "SalesVolume"); 
 
y.overrideMax = yMax; 
 
y.addOrderRule("SalesVolume"); 
 
var s = myChart.addSeries("Brand", dimple.plot.bar); 
 
s.barGap = 0.7; 
 
var horz = 0; 
 
var legendRectSize = 18; 
 
var legendSpacing = 4; 
 
var vert = 260; 
 
var legend = svg1.selectAll('.legend') 
 
      .data(dataChart) 
 
      .enter() 
 
      .append('g') 
 
      .attr('class', 'legend') 
 
      .attr('transform', function(d, i) { 
 
       var height = legendRectSize + legendSpacing; 
 
       var offset = 120; 
 
       horz = horz + offset; 
 
       if((i+1)%3 == 0){ 
 
       vert += 100; 
 
       horz = 0 + offset; 
 
       } 
 
       return 'translate('+horz+','+vert+')'; 
 
      }); 
 

 
    legend.append('rect') 
 
      .attr('width', legendRectSize) 
 
      .attr('height', legendRectSize) 
 
      .style('fill', '#333333') 
 
      .style('stroke', '#333333'); 
 

 
    legend.each(function(d,i){   
 
      var cLegend = d3.select(this); 
 
      // 10 is the fixed length based on which the long texts are spliced. 
 
      var texts = d.Brand.match(/.{1,10}/g); 
 
      texts.forEach(function(text, i){ 
 
       cLegend.append('text') 
 
     \t  .attr('x', legendRectSize + legendSpacing) 
 
      \t  .attr('y', legendRectSize - legendSpacing+(i*25)) 
 
        .text(text); 
 
      }); 
 
    }); 
 

 
     myChart.draw();

<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>