Fatal编程技术网
  • javascript/
  • Javascript （d3.js）如何在弧外创建标签？

Javascript （d3.js）如何在弧外创建标签？

javascript d3.js

Javascript （d3.js）如何在弧外创建标签？,javascript,d3.js,donut-chart,Javascript,D3.js,Donut Chart,我正在尝试在一些弧外创建标签。我读了这篇文章： 但仍然无法让它工作。不知何故，DOM中只显示一个文本标签，其位置不正确 以下是JSFIDLE链接： 这是我的密码： <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="d3.min.js"></script> <

我正在尝试在一些弧外创建标签。我读了这篇文章： 但仍然无法让它工作。不知何故，DOM中只显示一个文本标签，其位置不正确

以下是JSFIDLE链接：

这是我的密码：

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="d3.min.js"></script>
</head>
<body>
<script>

  var margin = {top: 10, right: 50, bottom: 10, left: 50},
      width = 300,
      r = width / 2,
      labelr = r + 20,
      outerRadius = 150,
      innerRadius = outerRadius - 30;
      numberOfSegments = 12;
      radians = (Math.PI * 2) / numberOfSegments;
      degrees = 360 / numberOfSegments;

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", 530);

  for (var j = 0; j < 5; j++) {
    var arc = d3.svg.arc()
        .innerRadius(innerRadius - j*30)
        .outerRadius(outerRadius - j*30)
        .startAngle(function (d,i) { return radians * i } )
        .endAngle(function (d,i) { return radians * (i + 1) });

    var myGroup = svg.append("g")
        .attr("transform", "translate(200,200)")
        .attr("class","arcgroup")
        .selectAll("path").data(d3.range(numberOfSegments))
        .enter().append("path")     
        .attr("class", "seg"+j+"")
        .attr("d", arc)
        .attr("fill", function(d,i) {
          return d3.hsl(i * degrees, 1 - 0.2*j, 0.5)
        });
  }

  var pos = d3.svg.arc()
      .innerRadius(innerRadius+30)
      .outerRadius(outerRadius+30)
      .startAngle(function (d,i) { return radians * i } )
      .endAngle(function (d,i) { return radians * (i + 1) });

  var label = svg.append("text")
      .attr("transform", function(d,i) { 
        return "translate(" + pos.centroid(d,i) + ")"; 
      })
      .attr("text-anchor", "middle")
      .text(function(d,i){
              return i*degrees + "°";
      });
</script>

</body>
</html>


var margin={顶部：10，右侧：50，底部：10，左侧：50}，
宽度=300，
r=宽度/2，
labelr=r+20，
外层=150，
内半径=外半径-30；
段数=12；
弧度=（Math.PI*2）/numberOfSegments；
度=360度/段数；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，530）；
对于（var j=0；j<5；j++）{
var arc=d3.svg.arc（）
.内半径（内半径-j*30）
.外层（外层-j*30）
.startAngle（函数（d，i）{返回弧度*i}）
.endAngle（函数（d，i）{返回弧度*（i+1）}）；
var myGroup=svg.append（“g”）
.attr（“转换”、“翻译（200200）”）
.attr（“类”、“arcgroup”）
.选择所有（“路径”）.数据（d3.范围（段数））
.enter（）.append（“路径”）
.attr（“类”、“段”+j+”）
.attr（“d”，弧）
.attr（“填充”，函数（d，i）{
返回d3.hsl（i*度，1-0.2*j，0.5）
});
}
var pos=d3.svg.arc（）
.内半径（内半径+30）
.外层（外层+30）
.startAngle（函数（d，i）{返回弧度*i}）
.endAngle（函数（d，i）{返回弧度*（i+1）}）；
var label=svg.append（“文本”）
.attr（“变换”，函数（d，i）{
返回“平移（“+pos.centroid（d，i）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d，i）{
返回i*度+“°”；
});
非常感谢

您在没有选择的情况下处理svg：您只添加了一个元素，没有附加任何数据，这就是为什么
d=undefined
和
i=0
在您的
transform
函数中的原因

像在小组创作中那样使用选择：类似

var selection = svg.append("g").attr("transform", "translate(200,200)").
    selectAll("text").data(d3.range(numberOfSegments)).enter()

var label = selection.append("text")
    .attr("transform", function (d) {
        return "translate(" + pos.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function (d) {
        return d * degrees + "°";
    });
和一个演示（标签的定位可能需要一些工作，但这应该让你开始）

var保证金={
前10名，
右:50,，
底部：10，
左：50
},
宽度=300，
r=宽度/2，
labelr=r+20，
外层=150，
内半径=外半径-30；
段数=12；
弧度=（Math.PI*2）/numberOfSegments；
度=360度/段数；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，530）；
对于（var j=0；j<5；j++）{
var arc=d3.svg.arc（）
.内半径（内半径-j*30）
.外层（外层-j*30）
.startAngle（功能（d，i）{
返回弧度*i
}).端角（功能（d，i）{
返回弧度*（i+1）
});
var myGroup=svg.append（“g”）
.attr（“转换”、“翻译（200200）”）
.attr（“类”、“arcgroup”）
.选择所有（“路径”）.数据（d3.范围（段数））
.enter（）.append（“路径”）
.attr（“类”、“段”+j+”）
.attr（“d”，弧）
.attr（“填充”，函数（d，i）{
返回d3.hsl（i*度，1-0.2*j，0.5）
});
}
var pos=d3.svg.arc（）
.内半径（内半径+30）
.外层（外层+30）
.startAngle（功能（d）{
返回弧度*d
}).端角（功能（d）{
返回弧度*（d+1）
});
var selection=svg.append（“g”）.attr（“transform”、“translate（200200）”）。
选择全部（“文本”）.数据（d3.范围（numberOfSegments））。输入（）
var label=selection.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+位置质心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d*度+“°”；
});

欢迎来到堆栈溢出！你能说得更具体些吗？当你说位置不正确时，请解释。标签出现在哪里？你想让它出现在哪里？我明白了！非常感谢你！一定要记下来！添加此行将使文本与文本的中心垂直对齐：.attr（“对齐基线”、“中心”）