如何在dimple.js中更改每个图例的位置?

时间:2015-07-20 09:39:31

标签: javascript d3.js dimple.js

我有一个使用dimple.js的条形图。如果使用d3功能很长,我正在包装图例标签。因为我正在包装文本,所以它与其他传说重叠。所以我需要重新定位图例以避免文本重叠。

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/2/这是我的小提琴

请让我知道如何实现这个目标?

0 个答案:

没有答案