SVG path element rendered inconsistently between different versions of Chrome

Question

Good morning,

I've created a chord diagram using D3. But I've encountered a problem with the output that causes paths to be rendered poorly in some versions of Chrome.

Here's an example of a problematic path generated by D3:

<svg height="1000px" width="1000px">
    <g transform="translate(400,400)">
    <path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path>
    </g>
</svg>

In most browsers, I see a single arc, which is what I'd expect. But on my dev machine running Chrome version 36.0.1985.125 on Ubuntu 14.04 I see the arc on top of a big gray circle. The big circle kind of ruins the rest of the diagram.

Is there anything particularly problematic about this path's d attribute that could cause it to get painted inconsistently by the browser?

Many thanks.

Here's an image of what I'm seeing when it goes wrong:

Answer 1

Expanding on @jshanley's comment, the breakdown of the path data is as follows (long decimals trimmed for readability):

d="M 329,-46
   //Move the pen to the starting point (329,-46)

  A 332.5,332.5 0 0,1 329,-46
   //draw a circular arc (radius in both directions 332.5 with 0 degrees rotation), 
   //in a clockwise direction taking the shortest route (flags 0,1)
   //ending at point (329,-46).

   //In a normal chord diagram, this is the edge of the chord, which follows the
   //arc of the large circle.

   //However, in this case the start and end points are the same 
   //and nothing should be drawn

  Q 0,0 -25,-331
   //draw a quadratic curve to point (-25, -331) using control point (0,0)
   //this is the curve you see, connecting different points on the large circle

  A 332.5,332.5 0 0,1 -25,-331
   //another arc with the same start and end points, which shouldn't be drawn

  Q 0,0 329,-46
   //Another quadratic curve, the exact same shape as the previous one
   //but going back in the opposite direction;
   //this is what causes the curve to look like a single line, no fill

  Z" 
   //close the shape

This is a definite bug in the Ubuntu Chrome version you're using. Path arc segments that start and end at the same point are supposed to be skipped, regardless of what the flag settings are, because they are not clearly defined. Even if the browser wasn't automatically skipping it, you'd think they would still respect the "short arc" flag and draw a zero-length arc.

If support for that particular browser version is important, you'll need to add in an error-check in your code, so that you don't draw the chords at all when they have zero width on both ends, or manually edit the path data to remove the empty arc commands.