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）拼接了长文本，并计算了x每个第三个图例的y位置。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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

1 个答案: