Question

我正在尝试使用画布而非svg使用太阳辐射作为google地图叠加层来创建d3轮廓图。我是d3的新手，并且正在开发我的js知识，我正在努力寻找可在其上工作的Internet上完整的示例。

首先，我为7 x 7网格制作了一些虚拟数据，这些数据具有要构成的值（10-40），我想在没有Google地图的html页面上显示这些数据。 >

我使用d3-contour创建MultiPolygons。我正在尝试将它们绘制到画布元素。使用我的代码，html中什么也没有出现，但是控制台中没有错误。这是我的代码...

<!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>Untitled Document</title>
</head>

<body>
    <canvas id="canvas" width="1000" height="1000"></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];


        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) {
            context.beginPath();
            path(contours
                 .thresholds(d3.range(0, 50, 10))(data));
            context.stroke();
        }

        update(values);

      </script>

   </body>
</html>

Answer 1

您必须画出每个MultiPolygon。

我定义了一些有趣的DEM示例。

<!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>

您如何将d3轮廓多面输出绘制到画布上？

1 个答案: