Javascript 在D3js中的圆弧上旋转矩形_Javascript_D3.js

Javascript 在D3js中的圆弧上旋转矩形

javascript d3.js

Javascript 在D3js中的圆弧上旋转矩形,javascript,d3.js,Javascript,D3.js,我试图在d3js圆弧上以0、90、180和270度定位矩形。下面是我放在一起的一个简单示例，它使用圆弧生成器创建4个圆弧，并使用arc.centroid函数将矩形放置在每个圆弧的中心点： <!DOCTYPE html> <meta charset="utf-8"> <head> <title>Rotate rectangles to arc positions: 0, 90, 180 & 270 </title> </

我试图在d3js圆弧上以0、90、180和270度定位矩形。下面是我放在一起的一个简单示例，它使用圆弧生成器创建4个圆弧，并使用arc.centroid函数将矩形放置在每个圆弧的中心点：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Rotate rectangles to arc positions: 0, 90, 180 & 270 </title>
</head>

<style>
path {
    fill: white;
    stroke: black;
}
</style>

<body>
  <svg width="700" height="220">
     <g transform="translate(200, 110)"></g>
  </svg>

  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>

  <script>
    // Create an arc generator with configuration
    var arcGenerator = d3.arc()
        .innerRadius(80)
        .outerRadius(100);

    var arcData = [
        {startAngle: 0, endAngle: Math.PI * 2 / 4, degree: 0},
        {startAngle: Math.PI * 2 / 4, endAngle: Math.PI, degree: 90},
        {startAngle: Math.PI, endAngle: Math.PI * 3 / 2, degree: 180},
        {startAngle: Math.PI * 3 / 2, endAngle: Math.PI * 2, degree: 270},
    ];

    // Create a path element and set its d attribute
    d3.select('g')
        .selectAll('path')
        .data(arcData)
        .enter()
        .append('path')
        .attr('d', arcGenerator);

    // Add labels, using .centroid() to position
    d3.select('g')
        .selectAll('rect')
        .data(arcData)
        .enter()
        .append('rect')
        .each(function(d) {
            var centroid = arcGenerator.centroid(d);
            d3.select(this)
                .attr('x', centroid[0])
                .attr('y', centroid[1])
                .attr('width', 10)
                .attr('height', 35)
        });
  </script>
</body>
</html>


将矩形旋转到圆弧位置：0、90、180和270
路径{
填充物：白色；
笔画：黑色；
}
//使用配置创建电弧发生器
var arcGenerator=d3.arc（）
.内半径（80）
.外层（100）；
变量arcData=[
{startAngle:0，endAngle:Math.PI*2/4，度：0}，
{startAngle:Math.PI*2/4，endAngle:Math.PI，度数：90}，
{startAngle:Math.PI，endAngle:Math.PI*3/2，度：180}，
{startAngle:Math.PI*3/2，endAngle:Math.PI*2，degree:270}，
];
//创建一个path元素并设置其d属性
d3.选择（'g'）
.selectAll（'路径'）
.数据（arcData）
.输入（）
.append（'路径'）
.attr（'d'，电弧发生器）；
//添加标签，使用.centroid（）定位
d3.选择（'g'）
.selectAll（'rect'）
.数据（arcData）
.输入（）
.append（'rect'）
.每个功能（d）{
var形心=电弧发生器形心（d）；
d3.选择（本）
.attr（'x'，质心[0]）
.attr（'y'，质心[1]）
.attr（'宽度'，10）
.attr（'height'，35）
});

结果如下：

相反，我希望将每个矩形放置在每个圆弧的起始或结束位置，并旋转，以便每个矩形都是纵向的（10像素宽，35像素长）

以下是我的：

为所需角度创建圆弧数据记录，并为这些虚拟圆弧使用

形心（）
在g
元素后面有一些非法的html

//使用配置创建电弧发生器
var arcGenerator=d3.arc（）
.内半径（80）
.外层（100）；
变量arcData=[
{startAngle:0，endAngle:Math.PI*2/4，度：0}，
{startAngle:Math.PI*2/4，endAngle:Math.PI，度数：90}，
{startAngle:Math.PI，endAngle:Math.PI*3/2，度：180}，
{startAngle:Math.PI*3/2，endAngle:Math.PI*2，degree:270}，
];
var rectData=arcData.map（d=>{return{startAngle:d.startAngle，endAngle:d.startAngle}；}）；
//创建一个path元素并设置其d属性
d3.选择（'g'）
.selectAll（'路径'）
.数据（arcData）
.输入（）
.append（'路径'）
.attr（'d'，电弧发生器）；
//添加标签，使用.centroid（）定位
d3.选择（'g'）
.selectAll（“.grect”）
.数据（rectData）
.输入（）
.append（'g'）
.attr（'class'，'grect'）
.attr（'transform'，d=>{
var形心=电弧发生器形心（d）；
返回` translate（${centroid[0]}，${centroid[1]}）`；
})
.append（'rect'）
.attr（'x'，-5）
.attr（'y'，-17）
.attr（'宽度'，10）
.attr（'height'，35）
路径{
填充物：白色；
笔画：黑色；
}

将矩形旋转到圆弧位置：0、90、180和270
感谢您的回答和html错误提示。我修好了。