javascript - 无需for循环访问多维数据，使圆弧数据沿径向

Question

在 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]是起始 Angular ，而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。我一直无法让其中任何一个工作。

这是 fiddle :https://jsfiddle.net/eog4dxag/2/

Answer 1

您可以使用另一个联接来访问数据，其中数据函数获取已联接的数据并访问该数组中的项目 [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

更新的 fiddle :https://jsfiddle.net/eog4dxag/5/