search

d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.47k stars 305 forks source link

curvePoints? #154

Closed Fil closed 1 year ago

Fil commented 4 years ago

When drawing a line with dots, it would be easier to use a curve to draw the individual points, rather than a specific loop. https://observablehq.com/d/5c4650cfb7214d6c

image

The image is obtained by first drawing:

line.curve(d3.curveLinear)(data) + stroke

then:

line.curve(curvePoints(4))(data) + orange fill + stroke

(The code is rather simple)

mbostock commented 4 years ago

Sounds good.

Fil commented 4 years ago

I'll work on a PR.

I've checked that it works well with defined(). I also looked for a more generic API which would allow curvePoint().pointRadius((d,i,e) => scaleRadius(d)), but at this level you only receive the accessed (x,y), and not the original (d,i,e) data point.

Fil commented 4 years ago

A useful alternative could be curveSymbol, which would allow to pass in any d3.symbol type; it works in canvas but, since we don't have context.translate() for the SVG version of d3.path, I'm not sure how to do it https://observablehq.com/d/5dda94b18c93e92b

Fil commented 1 year ago

need to reconsider, if there is interest, because so much is possible differently