时间戳

首页 > 解决方案 > 如何在画布上的多点模式下使用单独的颜色为 D3-Geo 路径点着色

javascript - 如何在画布上的多点模式下使用单独的颜色为 D3-Geo 路径点着色

问题描述

在这个 Mike Bostock 的例子中https://observablehq.com/@d3/testing-projection-visibility

我创建了一个 .csv，例如：

name,longitude,latitude,color
Airport,-158.617996216,59.2826004028,white
...

是否可以在生成整个路径时针对 .csv 值应用单个颜色：

const path = d3.geoPath(projection, context)
      .pointRadius(1.5);

context.beginPath();
    path({type: "MultiPoint", coordinates: points});
    context.fillStyle = "#000";
    context.fill();

我找不到将 .csv 文档中的颜色应用于context.fillStyle...任何想法的方法？

最好的，赫希弗克尔

标签： javascriptd3.jscanvas

解决方案

它可以过滤数据并创建各种多点对象，例如从 .csv 生成的数组中过滤所有白色元素，然后再将其传递给路径生成器：

var WhitePoints = points.filter(function (d) {return (d[3] === "white") })

推荐阅读