D3とjavascriptを使用したSVG rectとSVGテキストの垂直方向の整列

Question

スキルを実践するために、D3グラフで自分の凡例を作成しています。 svgの色付きの矩形を、対応するテキストと垂直に並べることができません。 2のためのyプロパティが同じであることを考えるとここで

私のコードとスクリーンショット

mk=[0,1,2,3,4] 
var legend_dim=50 
var legend_X=300 
var colors=["#1f78b4","#33a02c","#e31a1c","#ff7f00","#6a3d9a","#b15928"] 

d3.select("#chart").selectAll("rect") 
         .data(mk) 
         .enter() 
         .append("rect") 
         .style("fill", function(d,i) { return colors[i]})       .attr("x", function(d,i) { return 10*i}) 
         .attr("x", legend_X) 
         .attr("y", function (d,i){return i*legend_dim}) 
         .attr("width", legend_dim) 
         .attr("height", legend_dim) 



d3.select("#chart").selectAll("text") 
         .data(mk) 
         .enter() 
         .append("text") 
         .text(function(d,i) { return i}) 
         .attr("x", legend_X+20) 
         .attr("y", function (d,i){return (i)*legend_dim}) 
         .attr("font-size","12px") 

は、なぜずれるのですか？ どのように並べ替えることができますか？ ところで、テキストボックスの高さと幅を設定する方法はありませんか？

Answer 1

問題の基本的な性質があることである：SVG矩形の場合

• 、yの値は、矩形のトップをマーク。高さは、この値よりも矩形がどのくらい遠いかを示します。

• テキストの場合、y値は各svg文字のベースのy値を示します。文字はこの行の上にあり、長方形は下に伸びています。次の画像を参照してください。行はy = 100で、svgテキストのy値は100です。テキストのベースラインはy = 100に揃えられます。しかし、descendersとテキストは、このラインより低い拡張：

そのフォントサイズが最小のディセンダーの底から測定されていませんこれに清潔で決定的な解決に到着で挑戦フォントのベースラインから最高位のアセンダの上端まで、任意のマージンを持つ境界ボックスに移動します。このトピックは大幅に拡張することができます。この段落の道徳は、提案されたソリューションでテキストをオフセットするために必要な量がフォントとフォントサイズによって異なることです。そのウサギの穴を見下ろしたい場合は、thisが良い出発点です。

提案された解決策：あなたが知られているyの値を持つ矩形をお持ちの場合

は、あなたがテキストを配置するためにこれに設定値を追加することができます。オフセットはテキストサイズに比例する必要があります。また、フォントサイズが文字の高さに対応していない場合、値は通常フォントサイズ（ピクセル単位）より小さくなります。これはeyeballedまたは任意に推測することができますが、方法論的なアプローチは次のようになります。

また

var fontSize = 50; 
svg.append("text") 
    .attr("y",rectangleY + fontSize*0.8) 
    .attr("x",50) 
    .text("|text |") 
    .attr("font-size",fontSize); 

、あなたはオフセットを設定するには、DY属性を使用することができます。テキストと矩形の両方を同じyで設定しますが、テキストにはdyという属性を指定します。どちらも、以下の通りである：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",500) 
 
    .attr("height",200); 
 
    
 
var yValue = 100; 
 
    
 
svg.append("rect") 
 
    .attr("y",yValue) 
 
    .attr("x",0) 
 
    .attr("height",50) 
 
    .attr("width",50) 
 
    .attr("fill","orange"); 
 

 
// font below: 
 
var fontSize = 50; 
 
svg.append("text") 
 
    .attr("y",yValue + fontSize*0.8) 
 
    .attr("x",50) 
 
    .text("|text |") 
 
    .attr("font-size",fontSize); 
 
    
 
// font below: 
 
var fontSize = 50; 
 
svg.append("text") 
 
    .attr("y",yValue) 
 
    .attr("dy",fontSize*0.8) 
 
    .attr("x",310) 
 
    .text("|text |") 
 
    .attr("font-size",fontSize); 
 
    
 
// font above: 
 
svg.append("text") 
 
    .attr("y",yValue) 
 
    .attr("x",180) 
 
    .text("|text|") 
 
    .attr("font-size",fontSize); 
 

 
    
 
    
 
svg.append("line") 
 
    .attr("x1",0) 
 
    .attr("x2",400) 
 
    .attr("y1",100) 
 
    .attr("y2",100) 
 
    .attr("stroke","black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>