重构 d3js：将多个弧线和文本块转换为整洁的 js 函数

Question

我正在使用d3构建一个简单的动画导航元素（用于练习）。

然而，我的代码非常冗长，因为我正在创建相同的弧线（有一些例外）3 次并硬编码每个弧线。 作为一个初学者，我正在努力用javascript来清理这个问题。 此处的详细代码：http://tributary.io/inlet/7919286

为此，我创建了 JSON 对象来表示每个弧的唯一特征。

var data = {
    "arcs": [
        {
          "id": 1,
          "innerRadius": 100,
          "outerRadius": 150,
          "x": 45,
          "dy": 45,
          "text": "About"
        },
        {
          "id": 2,
          "innerRadius": 160,
          "outerRadius": 210,
          "x": 45,
          "dy": -15,
          "text": "Github"
        },
        {
          "id": 3,
          "innerRadius": 220,
          "outerRadius": 270,
          "x": 45,
          "dy": -75,
          "text": "Contact"
        }
    ]
}

我尝试在这里调用数据失败：http://tributary.io/inlet/8408617，但它坏了，我需要帮助。谢谢。

Answer 1

这个想法是，而不是显式附加元素，使用.selectAll(...).data(...).enter().append(...)模式来做到这一点。这意味着您需要用它替换当前显式附加元素的所有代码。对于path，这看起来像这样：

canvas.selectAll("path.arc").data(data.arcs)
  .enter().append("path")
  .attr("class", "arc")
  .attr("id", function(d, i) { return "path" + (i+1); });

其余的有点乏味，但不是太难 - 只需重复其他所有内容即可。结果就在这里。