Javascript 自定义dimple.js中的图例

我有一个条形图，我需要以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); 

-这是我的小提琴

---

我用d3.js修改了代码，现在我可以对文本进行wrpa，但是我无法更改图例（rect）的位置。因为如果对图例文本进行了包装，则下一个图例应位于包装文本之后。但现在它是重叠的。请告诉我如何解决这个问题。

@john-有什么帮助吗？有人知道吗？难道你不能看看呈现的DOM并找出如何访问各个组件吗？@很酷，我试过了，但没能成功。。这就是为什么我在这里发布了这个问题：）@john-有什么帮助吗？有人知道吗？你就不能看看呈现的DOM并找出如何访问各个组件吗？@很酷，我试过了，但没能成功。。这就是为什么我把这个问题贴在这里：）