I'd like to generate a map of municipalities in the northern part of The Netherlands using D3.js. Because FME 2019 now has a TopoJSON writer, I would like to build my map using a TopoJSON file. So I created a really simple workspace, with only a WFS reader, OrientationExtractor and TopoJSON writer.
The WFS URL is:
https://geodata.nationaalgeoregister.nl/bestuurlijkegrenzen/wfs?cql_filter=gemeentenaam IN ('Het Hogeland', 'Loppersum', 'Appingedam', 'Westerkwartier', 'Groningen', 'Delfzijl', 'Midden-Groningen', 'Oldambt', 'Veendam', 'Pekela', 'Westerwolde', 'Stadskanaal')
I am only interested in the feature type 'gemeenten'.
D3.js expects the winding order of polygons to adhere to the left-hand rule. I use the OrientationExtractor to make sure they all do. I verified that the orientation of all polygons is 'left_hand_rule'.
In the TopoJSON writer I specify that geometry should be reprojected to WGS 84 and that a bounding box should be added to the TopoJSON file.
However, when I try to visualize the TopoJSON file with D3.js I get an unexpected result: a black square.
https://bl.ocks.org/FrieseWoudloper/78283a3667c31d1575826ab17dd4bda8
The cause is the mixed winding orders (left- and right-hand) in the TopoJSON file. Why did the winding order change into right-hand rule for most of the municipalities, e.g. 'Het Hogeland' and 'Groningen', while the winding order of 'Veendam', 'Pekela' and 'Appingedam' is still left-hand rule?
When I replace the TopoJSON writer with a GeoJSON writer (with 'Convert Areas to Counterclockwise' set to 'No') and use Mapshaper.org to export the GeoJSON file to TopoJSON, everything looks fine. D3 visualizes the municipalities in the correct way:
https://bl.ocks.org/FrieseWoudloper/fa86853aecde846e3c8d945e61869f20
Is this a bug in the TopoJSON writer or did I overlook something?