search

d3plus / d3plus

A javascript library that extends D3.js to enable fast and beautiful visualizations.
MIT License
1.63k stars 188 forks source link

Incorrect handling of curveto ("C") command in d3plus.geom.path2poly #332

Open pifantastic opened 9 years ago

pifantastic commented 9 years ago

The current implementation of d3plus.geom.path2poly does not correctly handle curveto commands. For example:

Given a path with data:

<path d="M0,296.45768025078365L75,247.04806687565303C150,197.63845350052242,300,98.81922675026121,450,86.53082549634273C600,74.24242424242425,750,148.4848484848485,825,185.60606060606062L900,222.72727272727275L900,222.72727272727275L825,215.8150470219436C750,208.90282131661442,600,195.0783699059561,450,207.3667711598746C300,219.65517241379305,150,258.0564263322883,75,277.257053291536L0,296.45768025078365Z"></path>

d3plus.geom.path2poly returns:

[
  [0, 296.45768025078365],
  [75, 247.04806687565303, 197.63845350052242, 300, 98.81922675026121, 450, 86.53082549634273, 74.24242424242425, 750, 148.4848484848485, 825, 185.60606060606062],
  [900, 222.72727272727275],
  [900, 222.72727272727275],
  [825, 215.8150470219436, 208.90282131661442, 600, 195.0783699059561, 450, 207.3667711598746, 219.65517241379305, 150, 258.0564263322883, 75, 277.257053291536],
  [0, 296.45768025078365]
]

Here is a jsbin with a reproduction: http://jsbin.com/pohudefufo/1/edit?html,js,output

I haven't dug into the issue as I'm fairly new to hacking on SVG. My current workaround is to render the paths first, and get the polygon information via .getPointAtLength(). However that method is quite slow.

davelandry commented 9 years ago

Here's the source if you'd like to take a look: https://github.com/alexandersimoes/d3plus/blob/master/src/geom/path2poly.coffee

It's a pretty brute force way to converting the SVG path into coordinates. Currently, I believe it only catches lines and angles (no curves).