比例円とd3のラベル

比較的新しいd3で、比例円とそのラベルの垂直列を作成しようとしています。比例円とd3のラベル

この時点で私は水平な列を持ちますが、ラベルの配列全体（texts）が各円に対して繰り返されます。なぜこれが起こり、どうすればこれを避けることができますか？下の円はどのようにして逆さまにすることができるので、上にラベルを付けて水平にするのではなく、ラベルを縦に積み重ねますか？

どのような提案と説明もありがとうございます！ここで

は、すべてのテキストを毎回再印刷に関する最初の問題についてはJS Fiddle

<!DOCTYPE html> 
<meta charset="utf-8"> 
    <style> 

.radSol{ 
    background:white; 
} 

.circles{ 
    color:blue; 
    font-size:29 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.js"></script> 

<script> 

var h = 100 

var w = 595 

var xspa = 30 


var svg = d3.select('body').append('svg').attr('width', w).attr('height', h).attr('class','radSol'); 
// look at chp 7 of vizualizing data 

var circs = [0,2,4,6,8,10,12,14,16,18,20] 
var texts = [0,10,20,30,40,50,60,70,80,90,100] 

var rscale = d3.scale.linear() 

svg.selectAll('.circles').data(circs) 
.enter() 
.append('circle') 

.attr('r', function(d){ 
    return d 
}) 
.attr('class','circles') 
.attr('cy', h/2) 
.attr('cx',function(d,i){ 
// console.log(i) 
    return 20+ 40 *i 
}) 


svg.selectAll('text') 
.data(circs).enter().append('text') 
.text(texts) 
.attr('font-size', 10) 
.attr('fill', 'black') 
.attr('x', function(d,i){ 
    return 20 +40*i 
}) 
.attr('y', h/5) 
.attr('text-anchor', 'middle') 

d3.select('body').append('html:br') 

    </script> 
    </body>

出典

2017-03-14 the_darkside

の例です。サークルと同様に、n個の要素を追加します.nはデータの長さ（circs）の配列です。したがって、これらの行の場合：

svg.selectAll('text') 
.data(circs).enter().append('text') 
.text(texts)

配列のテキストをn回追加しています。代わりに、あなたのような何かを行うことができます：

svg.selectAll('text') 
.data(circs).enter().append('text') 
.text(function(d,i) { return texts[i]; })

iをn番目の円周上に、あなたは番目のテキストをしたいので、追加される要素の増分を表しています。垂直に、あなたが固定されたXの要素上の位置とy軸上の要素を位置（x軸上の位置に）あなたは今持っているものと同様の機能を適用することができ、円、テキストを再配置する

：

var h = 595 
 

 
var w = 595 
 

 
var xspa = 30 
 

 

 
var svg = d3.select('body').append('svg').attr('width', w).attr('height', h).attr('class','radSol'); 
 
// look at chp 7 of vizualizing data 
 

 
var circs = [0,2,4,6,8,10,12,14,16,18,20] 
 
var texts = [0,10,20,30,40,50,60,70,80,90,100] 
 

 
var rscale = d3.scale.linear() 
 

 
svg.selectAll('.circles').data(circs) 
 
.enter() 
 
.append('circle') 
 
.attr('r', function(d){ 
 
    return d 
 
}) 
 
.attr('class','circles') 
 
.attr('cy', function(d,i) { return 20+ 40 *i; }) 
 
.attr('cx', 50) 
 

 

 
svg.selectAll('text') 
 
.data(circs).enter().append('text') 
 
.text(function(d,i) { return texts[i]; }) 
 
.attr('font-size', 10) 
 
.attr('fill', 'black') 
 
.attr('x', 150) 
 
.attr('y', function(d,i){ 
 
    return 20 +40*i; 
 
    }) 
 
.attr('text-anchor', 'middle')

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

出典

2017-03-14 17:40:23

ありがとうございました！左に向かって右側にラベルを付ける方法は？ –

サークルのcxプロパティが50になるように設定できます。左から50ピクセルが円の中心になり、テキストのxプロパティはフレームの左から100,100ピクセルになります開始する。申し訳ありませんが、私は、サイドラベルとサークルがどのようなものであったかについての元の答えでそれを逃しました。 –

これを反映するようにスナップを更新しました。 –

答えて

関連する問題