如何根据 D3.js 中的度数度量绘制一条线？答案

【问题标题】：How would I graph a line based on a degree measure in D3.js?如何根据 D3.js 中的度数度量绘制一条线？
【发布时间】：2021-12-29 21:29:41
【问题描述】：

我正在尝试使用 JavaScript 库 D3.js 根据数组“类别”的长度绘制一个同样分割成不确定数量的“象限”的圆。下面链接了一个示例，有 4 个象限。

Example

我正在努力绘制划分每个“象限”的网格线的方法。我目前的方法是为每个独特的类别画一条线，从原点（圆的中心）到圆的圆周上的一点。但是，我不确定（1）我可以获得圆周上点的坐标的方法以及（2）是否有更好的方法。

截至目前，我有以下代码。

var svg = d3.select("svg#radar")
var radar = svg.append("g");
var grid = radar.append("g");
categories = Array(["cat_1", "cat_2", "cat_3"])
function getX1 (i) {
  //get necessary coordinate
}
function getY1 (i) {
  //get necessary coordinate
}
for (var i; i < categories.length; i++) {
  grid.append("line")
    .attr("x1", getX1(i))
    .attr("y1", getY1(i))
    .attr("x2", 0)
    .attr("y2", 0)
    .style("stroke", config.colors.grid)
    .style("stroke-width", 1);
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js data-science

【解决方案1】：

我想通了。

只需像这样使用三角函数（正弦和余弦）：

var svg = d3.select("svg#radar")
var radar = svg.append("g");
var grid = radar.append("g");
categories = Array(["cat_1", "cat_2", "cat_3"])
function getX1 (i) {
    var deg = (360 / categories.length) * i; 
    var percent_of_circle = deg / 360
    var radians = percent_of_circle * 2 * Math.PI
    return 400 * Math.cos(radians);
}
function getY1 (i) {
    var deg = (360 / categories.length) * i; 
    var percent_of_circle = deg / 360
    var radians = percent_of_circle * 2 * Math.PI
    return 400 * Math.sin(radians);    }
for (var i; i < categories.length; i++) {
  grid.append("line")
    .attr("x1", getX1(i))
    .attr("y1", getY1(i))
    .attr("x2", 0)
    .attr("y2", 0)
    .style("stroke", config.colors.grid)
    .style("stroke-width", 1);
}

【讨论】：