在 d3.js 中制作弧线

Posted 2023-02-22

【中文标题】在 d3.js 中制作弧线

【英文标题】：making an arc in d3.js

【发布时间】：2012-09-24 22:07:13

【问题描述】：

我正在使用 javascript 库 d3.js (http://d3js.org/) 来创建画布数据可视化。我正在尝试制作弧线，但它不接受我数组中的数据参数。有谁知道我做错了什么？这是我的代码：

var chartConfig =  "canvasSize" : 800 

var radius = chartConfig.canvasSize / 2;
var pi = Math.PI;

var vis = d3.select("#chart").append("svg")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var arcData = [
  aS: 0, aE: 45,rI:radius/2,rO:radius
];
var arc = vis.selectAll("arc").data(arcData).enter().append("arc");
arc.attr("innerRadius", function(d)d.rI).attr("outerRadius",function(d)d.rO).attr("class","arc");

function degToRad(degrees)
  return degrees * (pi/180);

【参考方案1】：

SVG 中没有arc 元素，您需要定义适当的路径元素。幸运的是，有一个 d3 辅助函数可以做到这一点。

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

http://jsfiddle.net/g0r9n090/ 的工作示例；

【讨论】：

这可以从 arcData 数组中返回正确的值，但实际上并没有将弧线绘制到屏幕上。少了什么东西？我附上了 DOM 树的屏幕截图 - 弧节点在那里，但没有出现。

很抱歉，我刚刚看到您没有返回值的直接问题。完全错过了您尝试创建 arc 元素的部分。我已经用创建弧的示例更新了我的答案。

仅供参考：d3.svg.arc() 已更改为 d3.arc()