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); });

其余的有点乏味，但并不太难 - 只需重复其他一切。结果是here。

重构d3js：多个弧和＆amp;文本块进入整齐的js函数

1 个答案: