How to use d3.path.arc

Community Help
1

I have a dataset as mentioned here in this notebook. All I want is to create a path that utilizes the path’s A command to go through the points to create the desired path.

Regarding the dataset, circleX,circleY are the points on a circle that has circleRadius, centreX, centreY.

I can use d3.line to do the job as follows

d3.select("#svg")
  .append("path")
  .attr("d", () => {
    return data.reduce((acc, d, i) => {
      const largeArc = 0;
      const sweepFlag = 1;
      if (i === 0) {
        return acc + `M${d.circleX},${d.circleY}`;
      } else {
        return (
          acc +
          "," +
          `A${d.circleRadius} ${d.circleRadius} 0 ${largeArc} ${sweepFlag} ${d.circleX},${d.circleY}`
        );
      }
    }, "");
  })

But I am simply trying to understand, how can I use path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) to generate the same path. What do I need to feed these parameters and what do they expect?

Thank you in advance.
@mcmcclur @Fil

2

I’m not quite sure what effect you’re going for because the notebook is just rendering a single large circle. Do you have an example image?

d3.path.arc is for drawing a fraction of a circle. If you want to draw a line connecting points that are defined in relation to different circles, it isn’t the right tool.

3

I don’t see where you’re using d3.line. That would look something like so:

svg
  .append("path")
  .attr("d", d3
    .line()
    .x((d) => d.circleX)
    .y((d) => d.circleY)(data)
   )

Note that d3.line is part of d3-shape and, like all the functions defined there, it transforms appropriately formatted data into an SVG path string.

d3.path is a bit different; it’s designed to serialize a sequence of instructions to draw a figure on an HTML canvas into an SVG path string. Most methods have abbreviations for those instructions, as well. Thus, the following should generate a quarter circle:

{
  let svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, 200, 200])
    .style("max-width", "200px");
  let path = d3.path();
  path.arc(100, 100, 80, 0, Math.PI / 2);
  svg
    .append("path")
    .attr("d", path)
    .attr("stroke", "black")
    .attr("fill", "none")
    .attr("stroke-width", 4);
  return svg.node();
}

Taking that into account, you can draw the arcs from your data like so:

I do think that @CAYdenberg’s point is well-taken; the structure of the data obfuscates the fact that there’s just one circle.

3 Likes