javascript - 如何使用 D3.js 更改图例的位置

Question

我已经使用dimple.js绘制了一个条形图，现在我尝试使用d3.js绘制图例。现在我可以绘制图例，但图例文本重叠，如果图例文本与下一个图例重叠，我需要将图例文本换行，而且我只需要连续显示 2 个图例。但现在由于空间的原因，第三个传说被隐藏了。所以我需要将第三个图例放在第二行。

http://jsfiddle.net/keshav_1007/qgn9gaec/3/ - 这是我的 fiddle

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)拼接长文本，并计算每三个图例的 x 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') 
        	      .attr('x', legendRectSize + legendSpacing)
          	      .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>