javascript - 在没有for循环的情况下访问多维数据以沿径向生成圆弧数据

在D3中，我试图访问在此多维数组（[0，[1、2、3、4、5]]中找到的粗体数据，以沿圆弧径向添加项目，而没有for循环。

var dataObject = [
  [0, [1, 2, 3, 4, 5]],
  [90, [10, 20, 30, 40, 50]],
  [180, [15, 25, 35, 45, 55]]
];

dataObject [0] [0]是起始角度，而dataObject [0] [1]是沿径向向下的值。

以下是相关代码：

var arc = d3.arc()
  .innerRadius(function(d) {
    return 0;
  })
  .outerRadius(function(d) {
    return 100;
  })
  .startAngle(function(d, i) {
    return Math.radians(d[0]);
  })
  .endAngle(function(d, i) {
    return Math.radians(d[0] + 45);
  });

// Need an extra select statement here?
    svg.selectAll("path")
      .data(dataObject)
      .enter()
      .append("path")
      .attr("d", arc);

在我看来，我需要在注释附近的最后一块代码中嵌入一个额外的选择，或使用d3.nest。我都无法上班。

这是小提琴：https://jsfiddle.net/eog4dxag/2/

最佳答案

您可以使用另一个联接访问数据，其中数据功能获取已联接的数据并从该数组访问项[1]。

由于不清楚您要创建什么，因此此示例追加了g元素：

let arcs = svg.selectAll("path")
  .data(dataObject)
  .enter()
  .append("g")
  .attr("class", "parent");

arcs.append("path")
  .attr("d", arc);

arcs.selectAll(".child")
  .data(function(d){ return d[1] })
  .enter()
  .append("g")
  .attr("class", "child")
  //append whatever you want here

更新的小提琴：https://jsfiddle.net/eog4dxag/5/