d3Plus將圖例移動到頂部

我正在使用d3Plus創建樹圖和條形圖，但我遇到的問題是圖例僅在圖表後顯示，我想將該圖例移動到之前顯示頂部的圖表。原因是用戶必須一直向下滾動才能看到圖例。d3Plus將圖例移動到頂部

圖例圖像

2016-12-30 Dudunegrinhu

據d3Plus文件，'.legend（）'沒有'position'屬性。 https://github.com/alexandersimoes/d3plus/wiki/Visualizations#legend – McNets

這是因爲痛苦的如何d3plus動畫（即轉變）的圖表的各種部件，因爲它們加載。但您可以將自己的傳奇的東西，如：

<!doctype html> 
 
<meta charset="utf-8"> 
 

 
<script src="//d3plus.org/js/d3.js"></script> 
 
<script src="//d3plus.org/js/d3plus.js"></script> 
 

 
<div id="viz"></div> 
 

 
<script> 
 
    var data = [{ 
 
    "year": 1991, 
 
    "name": "alpha", 
 
    "value": 15 
 
    }, { 
 
    "year": 1991, 
 
    "name": "beta", 
 
    "value": 10 
 
    }, { 
 
    "year": 1991, 
 
    "name": "gamma", 
 
    "value": 5 
 
    }, { 
 
    "year": 1991, 
 
    "name": "delta", 
 
    "value": 50 
 
    }, { 
 
    "year": 1992, 
 
    "name": "alpha", 
 
    "value": 20 
 
    }, { 
 
    "year": 1992, 
 
    "name": "beta", 
 
    "value": 10 
 
    }, { 
 
    "year": 1992, 
 
    "name": "gamma", 
 
    "value": 10 
 
    }, { 
 
    "year": 1992, 
 
    "name": "delta", 
 
    "value": 43 
 
    }, { 
 
    "year": 1993, 
 
    "name": "alpha", 
 
    "value": 30 
 
    }, { 
 
    "year": 1993, 
 
    "name": "beta", 
 
    "value": 40 
 
    }, { 
 
    "year": 1993, 
 
    "name": "gamma", 
 
    "value": 20 
 
    }, { 
 
    "year": 1993, 
 
    "name": "delta", 
 
    "value": 17 
 
    }, { 
 
    "year": 1994, 
 
    "name": "alpha", 
 
    "value": 60 
 
    }, { 
 
    "year": 1994, 
 
    "name": "beta", 
 
    "value": 60 
 
    }, { 
 
    "year": 1994, 
 
    "name": "gamma", 
 
    "value": 25 
 
    }, { 
 
    "year": 1994, 
 
    "name": "delta", 
 
    "value": 32 
 
    }] 
 
    var visualization = d3plus.viz() 
 
    .container("#viz") 
 
    .data(data) 
 
    .type("bar") 
 
    .id("name") 
 
    .x("year") 
 
    .y("value") 
 
    .color("name") 
 
    .legend(true) 
 
    .draw(); 
 

 
    moveLegend(); 
 

 
    function moveLegend() { 
 
    var l = d3.select("#key"), 
 
     c = d3.select("#container"); 
 

 
    // wait for the legend and container to appear 
 
    // if not wait 200 milliseconds and try again 
 
    if (!l.size() || !c.size()) { 
 
     setTimeout(moveLegend, 200); 
 
    } else { 
 
     // both now exist 
 
     // move legend to top 
 
     l.transition() 
 
     .attr("transform","translate(0,0)"); 
 
     // move chart down height of legen 
 
     var lh = l.node().getBBox().height; 
 
     c.attr("transform", "translate(0," + lh + ")"); 
 
    } 
 
    
 
    } 
 
</script>

來源

2016-12-30 20:25:42 Mark

d3Plus將圖例移動到頂部

回答

相關問題