D3.js areaRadial.defined() 方法

在 D3.js 中，areaRadial() 函数是用来创建基于极坐标的面积图的。而 defined() 方法则是用来控制哪些数据点将被绘制，哪些将被忽略。

语法：

在使用 areaRadial() 方法后，我们可以链式调用 defined() 方法。

areaRadial().defined(function(d, i, data) {
  // 控制数据点绘制
})

该方法接受一函数作为参数，这个函数将在每个数据点绘制前被调用，用来判断这个数据点是否应该被绘制。该函数将接收三个参数：

• d - 当前的数据点
• i - 当前的索引
• data - 原始数据集

例子：

让我们来看一个例子，调用 areaRadial() 来绘制基于极坐标的面积图。然后使用 defined() 方法来控制只有值大于等于零的数据点才会被绘制：

// 数据集
const data = [
  { value: -10 },
  { value: 20 },
  { value: 30 },
  { value: -5 },
  { value: 15 }
];

// 极坐标系
const polar = d3.scaleLinear()
  .domain([0, data.length])
  .range([0, Math.PI * 2]);

// 极径长度
const radius = 200;

// 创建一个面积图生成器
const area = d3.areaRadial()
  .angle(function(d, i) { return polar(i); })
  .innerRadius(0)
  .outerRadius(function(d) { return radius + d.value; });

// 将面积图应用到 <path> 元素
var svg = d3.select("svg");
svg.append("path")
  .datum(data)
  .attr("fill", "steelblue")
  .attr("stroke", "black")
  .attr("stroke-width", 1)
  .attr("d", area.defined(function(d, i) {
    return d.value >= 0;
  }));

在以上例子中，我们使用了 defined() 方法来控制只有 value 大于等于零的数据点才会被绘制。因此，属于这个条件的 2 个数据点被成功绘制出来，而属于不符合条件的 3 个数据点则被忽略了。

结论：

defined() 方法是一个非常有用的方法，它可以让我们有更大的灵活性来控制数据点是绘制还是忽略，在使用 D3.js 绘制图表时，尤其有用。