1. ホーム
  2. 質問と答え
  3. d3Plus凡例を先頭に移動

d3Plus凡例を先頭に移動

2016-12-30 10 views
1

私はd3Plusを使用してツリーマップと棒グラフを作成していますが、問題は凡例がグラフの後にのみ表示され、前にその凡例を表示することです上のグラフ。その理由は、ユーザーが凡例を見るために全部スクロールしなければならないからです。d3Plus凡例を先頭に移動

凡例画像

enter image description here

出典

2016-12-30 Dudunegrinhu

+0

。 https://github.com/alexandersimoes/d3plus/wiki/Visualizations#legend – McNets

答えて

2

それらが負荷としてこれは、どのようd3plusアニメーション（すなわち遷移）チャートの様々な構成要素の苦痛です。 しかし、あなたのようなもので伝説を自分で移動することができます：d3Plusのドキュメント、 `.legend（）` `position`プロパティを表示できませんよると

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

関連する問題

 関連する問題