Как вы рисуете мультиполигональный вывод d3-контура на холст? - PullRequest
Новая
       7

Как вы рисуете мультиполигональный вывод d3-контура на холст?

0 голосов
/ 11 сентября 2018

Я пытаюсь создать контурную карту d3, используя солнечную радиацию в качестве наложения карт Google, используя canvas, а не svg.Я новичок в d3 и развиваю свои знания js, я изо всех сил пытаюсь найти полные примеры по сетям для работы.

В качестве начального шага я сделал несколько фиктивных данных для 7 x7 сетка с составленными значениями (10-40), которые я хочу отобразить на html-странице без карт Google.

Я использую d3-контур, который создает мультиполигоны.Я пытаюсь нарисовать их на элемент холста.С моим кодом ничего не появляется в 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Вы должны нарисовать каждого человека MultiPolygon.

Я определил немного более интересные образцы матрицы высот. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...