重构d3js:将多个弧和文本块重构为整齐的js函数

我正在使用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 ,但它已经坏了,我需要帮助。 谢谢。

采纳答案:

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

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

其余的有点乏味,但并不太难 - 只需重复其他一切。 结果就在这里

author: lars-kotthoff

参考更多解答: Refactoring d3js: multiple arcs & text blocks into tidy js functions ,转载请保留出处重构d3js:将多个弧和文本块重构为整齐的js函数及作者信息

Statement: We respect knowledge and authors. Since the content comes from the Internet and is intended for scientific research, any reprinters should retain the author's signature and origin. If you are the author of the content and feel in dispute, please contact email: 1076545519@qq.com. We will find out the situation and deal with it in time. We sincerely thank the author for his hard work.


更多:d3.js