Arc example

[thecodeah]

I've been using visx for some time now but I've never actually been able to render an Arc. I'm not sure whether it's a bug or if I'm doing something wrong.

The Arc can be quite difficult to understand. It has tons of radius and angle attributes. Even when passing in random arguments like this:

<svg width={250} height={250}>
  <Arc
      startAngle={10}
      endAngle={180}
      innerRadius={30}
      cornerRadius={30}
      outerRadius={50}
      padAngle={10}
      padRadius={10}
      fill={"#FF0000"}
   ></Arc>
</svg>

I can't get anything to show up. (Not even anything in Inspect Element which is why I have the feeling that it might just be a bug)

It'd be nice to have a simple example, which I could copy paste and then modify to understand what each attribute does.

[williaster]

Love it! We could add something like the /text demo with inputs that change the Arc props to get a sense for their function.

I can probably work on this in the next week or so, but in the mean time added the 👋 help wanted label in case someone wants to jump on it sooner

[oscar-broman]

As seen here, arc does not take any arguments. Why is data required here?

[hshoff]

It should not be required as it does nothing. This is a bug, <Arc /> is broken in current state.

<Pie> still works because it doesn't use <Arc /> component, it uses the arc path shape factory util.

[williaster]

@oscar-broman @hshoff I think data should be optional, not removed because it supports both types of usage.

arc optionally takes arguments as you can see in the readme and it's confusing but a few lines down from the line you linked you can see that arguments are passed along to the accessors.

Arc is functional as it is used in the /chord demo. If you omit the data prop, it fails to draw anything. I think this is confusing because the d3 API supports two types of usage (and thus so does visx):

const arc1 = d3.arc();
arc1({ innerRadius, ... }); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

const arc2 = d3.arc().innerRadius(...)...;
arc2(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

[ChamsBouzaiene]

@thecodeah I know this is an old issue, but I thought maybe this will help someone who struggles with the arc component I have built a color wheel using the Arc component here

[gknapp]

Thanks for the colour wheel example, been struggling to get anything but whole rings rendering from the Arc component, even with start and end angles specified.

I took to reading the source as well, to see why nothing rendered at first, then I satisfied the conditional by supplying a data prop.

Update: After tinkering with ChamsBouzaiene's code, my mistake was to assume start and end angles were in degrees, when it appears they should be in radians? Arcs no longer drawing complete circles 👍