Accessing multi-dimensional data without a for loop to make arc data along radial

In D3, I'm trying to access the bolded data found in this multi-dimensional array ([0,[1, 2, 3, 4, 5]] to add items radially along an arc without a for loop.

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

dataObject[0][0] is the start angle while dataObject[0][1] are values down radial.

Here's the relevant code:

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

It seems to me that I need to embed an extra select in the final block of code near my comment or use d3.nest. I haven't been able to get either to work.

Here's the fiddle: https://jsfiddle.net/eog4dxag/2/

2 answers

  • answered 2017-11-12 20:14 Tom Shanley

    You can access the data using another join, where the data function takes the already joined data and accesses item [1] from that array.

    As its not clear what you want to create, this example appends g elements:

    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
    

    Updated fiddle: https://jsfiddle.net/eog4dxag/5/

  • answered 2017-11-12 20:22 pirs

    Try

    var dataObject = [
      [0, [1, 2, 3, 4, 5]]
    ];
    
    svg.selectAll("path")
      .data(dataObject.map(function(d){ return d[1] })) // should be [1, 2, 3, 4, 5]