Question

我有一个条形图，我需要以3 X 3（每行3个图例）的方式显示条形图的六个图例或更多图例。怎么做。我每行只能获得2个传说。如何自定义一行中的图例数量，如果图例文本较大，则应以特定宽度包装。请让我知道如何做到这一点。

 var yMax = 520; // overriding y axis
var popup;
        var score=8000/100;
        var svg = dimple.newSvg("#chartContainer", 300, 400);
        var data = [{
            "Brand":"Aaaaa aaaaaaaaaaaaa", 
            "Day":"Mon", 
            "SalesVolume":100 },
            { 
            "Brand":"Bbbbbbbb bbbbbbbb", 
            "Day":"Mon", 
            "SalesVolume":200 },
            { 
            "Brand":"Cccccccccccccccc c", 
            "Day":"Mon", 
            "SalesVolume":200 },
            { 
            "Brand":"Ddddddddddd ddddddd", 
            "Day":"Mon", 
            "SalesVolume":200 },
            { 
            "Brand":"Eeeeeeeeeee eeeee", 
            "Day":"Mon", 
            "SalesVolume":200 },
            {  
            "Brand":"Fffffffffffff ffffffffffff", 
            "Day":"Mon", 
            "SalesVolume":200 }];
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(100, 10, 250, 250)
        var x = myChart.addCategoryAxis("x", "Day");
        var y = myChart.addMeasureAxis("y", "SalesVolume");
        y.overrideMax = yMax;
         y.addOrderRule("SalesVolume");
        var s = myChart.addSeries("Brand", dimple.plot.bar);
        s.barGap=0.8;
        var lgnd = myChart.addLegend(80, 300, 300, 30, "left");
lgnd.horizontalPadding = 1000;
lgnd.verticalPadding = 10000;

myChart.draw();     
        //d3.selectAll("rect").on("mouseover", null);

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        x = text.attr("x"),
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y-10).attr("dy", 1 + "em");
        console.log(y);
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y+10).attr("dy", 1 + "em").text(word);
      }
    }
  });
}

d3.selectAll(".legendText")
  .call(wrap, 100);

http://jsfiddle.net/keshav_1007/qec4L4zh/1/ - 这是我的小提琴

我使用d3.js更改了代码，我现在可以写文本但我无法更改图例（rect）的位置。因为如果包含图例文本，则下一个图例应该在包装文本之后。但现在它重叠了。请让我知道如何解决这个问题..

在dimple.js中定制图例

0 个答案: