Question

我是d3的新手，我正在尝试创建一个垂直的比例圆及其标签列。

此时我有一个水平列，但每个圆圈都会重复整个标签数组（texts）。为什么会发生这种情况，我该如何避免这种情况？如何将下面的圆圈倒置，使它们垂直堆叠，标签位于右侧而不是水平位置，标签位于顶部？

任何建议和解释都将不胜感激！

中的示例

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

Answer 1

关于每次重印所有文本的第一个问题。与圆圈一样，您附加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个圆圈上，您需要第n个文本。

要垂直重新排列圆圈和文本，您可以定位在固定的x元素上，并应用与现在相似的功能（在x轴上定位）以在y轴上定位元素：

＆＃13;

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')

＆＃13;

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

＆＃13;

d3中的比例圆和标签

1 个答案: