CODEWITHSUNDEEP
javascriptd3.js
iskandarblue
iskandarblue

Reputation: 7526

Proportional circles and labels in d3

I am relatively new to d3 and am attempting to create a vertical column of proportional circles and their labels.

At this point I have a horizontal column, but the entire array of labels (texts) are repeated for each circle. Why does this happen and how can I avoid this? How can the circles below be inverted so they are stacked vertically with labels to the right as opposed to horizontal with labels on top?

Any suggestions and explanation would be appreciated!

Here is the example in 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>

Upvotes: 1

Views: 176

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38211

For the first issue regarding reprinting all the text each time. As with the circles, you are appending n elements where n is the length of your data (circs) array. So for these lines:

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

You are appending the array texts n times. Instead you could do something like:

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

The i represents the increment of the element being appended, so on the nth circle, you want the nth text.

To rearrange the circles and text vertically, you can position on a fixed x element and apply functions similar to what you have now (to position on the x axis) to position elements on the y axis:

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>

Upvotes: 1

Related Questions