Problem with d3.geo

[amirduran]

I followed the following example in order to draw hexagons on my graph:

http://jsfiddle.net/robertocarroll/zwf4wxx8/

In the tutorial there is a fancy function that defines required path:

let path_generator = d3.geo.path().projection(d3.geo.transform({
                point: function(x, y) {
                    return this.stream.point(x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2);
                }
            }));

The problem is, my angular 2 is throwing an error stating that path() function doesn't exist on null object, meaning that d3.geo is basically NULL value.

How can I access to d3.geo instead?

[tomwanzek]

@amirduran I am obviously 😉 assuming that you are using the d3-ng2-service to create your d3 object before using it in the snippet above.

That being said, the short answer is that the tutorial you are trying to implement was written on the basis of D3 version 3.x. This service, however, is based on the modularized D3 introduced with version 4.x (and now 5.x).

When D3 was re-written for version 4.x, several name changes to methods/functions/objects were implemented to ensure the separate modules play nicely together.

For a reference to these changes check out this extensive D3 v4 migration reference, e.g. d3.geo.path() became d3.geoPath() as per the subsection on Geographies

So you will need to rewrite the tutorial accordingly. A couple of additional tips:

(1) If you are using this service to bring D3 into an angular component, your Code Editor/IDE should have extensive auto-completion support/code hints due to the TypeScript definitions we build for D3. Most of the D3 submodules have extensive JSDoc comments and method overloads are explained as well. (2) We made wide-ranging use of generics in those TS Definitions to control data types and this-context on which D3 features like geoPath<...,...>(...)/GeoPath<...,...> operate. Again, in most cases the JSDoc comments for method overloads or interfaces with generic parameterization will explain the meaning of the generics. Usually, at the end of the comment. (3) d3-ng2-service does not provide the functionality contained in d3-request/d3-fetch and as of its latest major release (2.0.0) d3-queue has been dropped as well. So, if your tutorial contains data loading/http requests, use Angular's features instead (i.e. HttpClient). If you need to parse loaded csv/tsv/dsv data, you can use the D3 features from d3-dsv, as this module was included for convenience.

Hope this helps get you started... 😄

[amirduran]

Thank you for your answer. Helped me a lot!