score:1

Accepted answer

You must draw each individual MultiPolygon.

I have defined a little more interesting DEM samples.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<title>d3-contour-multipolygon</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
values  = [10,10,10,10,10,10,10,
           20,20,20,20,20,20,20,
           30,30,30,30,30,30,30,
           40,40,40,40,40,40,40,
           30,30,30,30,30,30,30,
           20,20,20,20,20,20,20,
           10,10,10,10,10,10,10];

values  = [ 0, 0, 0, 0, 0, 0, 0,
            0,20,25,29,21,22, 0,
            0, 0,39,32,33,10, 0,
            0,10,40,50,42,40, 0,
            0, 0,31,39,34,24, 0,
            0,12,22,31,26,23, 0,
            0, 0, 0, 0, 0, 0, 0];

var n = 7,
    m = 7,
    canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    // path = d3.geoPath().context(context);
    contours = d3.contours().size([n, m]);
    projection = d3.geoIdentity().scale(canvas.width / n),
    path = d3.geoPath(projection, context);

function update(data) {
    var cntrs = contours.thresholds(d3.range(0, 60, 10))(data);
    cntrs.forEach(c => {
        if (c.coordinates.length == 0) return;
        context.beginPath();
        // path(contours.thresholds(d3.range(0, 60, 10))(data));
        path(c);
        context.stroke();
    });
}

update(values);

</script>
</body>
</html>


Related Query

More Query from same tag