Error in topojson feature datum

[mikepziegler]

Hi, I'm programming a map with d3.js, that should display the canton Thurgau. Unfortunately, It gives an error:
Uncaught TypeError: Cannot read property 'type' of undefined at Object.p [as feature] (topojson.v1.min.js:2) at localhost/:46 at Object.<anonymous> (d3.v3.min.js:1) at Object.t (d3.v3.min.js:1) at XMLHttpRequest.i (d3.v3.min.js:1)

I've made an json file with :
make topo/ch-cantons.json PROPERTIES=Thurgau,tg

and there is my json code:

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        d3.json("ch-cantons.json", function(error, ch) {
            if (error) return console.error(error);
            console.log(ch);

            svg.append("path")
                **.datum(topojson.feature(ch, ch.objects.lake))** here is the error
                .attr("d", d3.geo.path().projection(d3.geo.mercator()));
        });

Can you help me with this?

[jstcki]

Try make topo/tg-municipalities-lakes.json or make topo/ch-cantons-lakes.json instead.

[mikepziegler]

I tried make topo/tg-municipalities-lakes.json PROPERTIES=Thurgau,tg and changed my code to
`d3.json("ch-cantons.json", function(error, ch) {
if (error) return console.error(error);
console.log(ch);

        svg.append("path")
            .datum(topojson.feature(ch, ch.objects.municipalities))
            .attr("d", d3.geo.path().projection(d3.geo.mercator()));
    });`

Now it shows a black screen and gives this error:
d3.v3.min.js:1 Error: <path> attribute d: Expected number, "…8.7915379337088,NaNL898.79153793…". o @ d3.v3.min.js:1 (anonymous) @ d3.v3.min.js:3 Y @ d3.v3.min.js:1 Co.each @ d3.v3.min.js:3 Co.attr @ d3.v3.min.js:3 (anonymous) @ (index):47 (anonymous) @ d3.v3.min.js:1 t @ d3.v3.min.js:1 i @ d3.v3.min.js:1 XMLHttpRequest.send (async) Cn.u.send @ d3.v3.min.js:1 u.(anonymous function) @ d3.v3.min.js:1 Cn @ d3.v3.min.js:1 ao.json @ d3.v3.min.js:5 (anonymous) @ (index):41 @d3.v3.min.js:1

Is this a mistake from d3.js or are there still mistakes inside my code?

[jstcki]

The generated topojson files contain projected coordinates by default. Please read https://github.com/interactivethings/swiss-maps#projections-and-dimensions for an explanation.

This should work:

d3.json("tg-municipalities-lakes.json", function(error, tg) {
  if (error) return console.error(error);

  // Use null projection because coordinates are already projected
  var geoPath = d3.geo.path().projection(null);

  svg.append("path")
    .datum(topojson.feature(tg, tg.objects.municipalities))
    .attr("d", geoPath);
});

[jstcki]

Also, you don't need PROPERTIES=Thurgau,tg, that won't do anything useful anyway. See https://github.com/interactivethings/swiss-maps#metadata

[mikepziegler]

Great, thanks for your help.