使用D3.js的颜色代码LineString绘图

Question

如何根据我从CSV文件中读取的唯一值为行字符串加上颜色？ 我希望根据从CSV文件读取的每一行生成具有不同颜色的行字符串。

for(var i=0, len=data.length-1; i<len; i++){
        // (note: loop until length - 1 since we're getting the next
        //  item with i+1)

        links.push({
            type: "LineString",
            coordinates: [
                [ data[i].OperatorOwnerLon, data[i].OperatorOwnerLat ],
                [ data[i].CountryOfContractorLon, data[i].CountryOfContractorLat ],
                [ data[i].lon, data[i].lat ]
            ]
        })

Answer 1

d3.js没有任何本地显示功能。 它依赖于HTML，CSS，SVG，Canvas或您选择的任何其他显示技术。 由于您正在执行文本行，因此HTML和CSS绰绰有余。

您没有说要如何将经纬度坐标转换为颜色，所以我将使用城市名称来选择一个更简单的示例。 假设CSV为：

City,Country,Population
Shanghai,China,24256800
Karachi,Pakistan,23500000
Beijing,China,21516000
São Paulo,Brazil,11895893

假设您的HTML有一个div ，您要在其中放置文本：

<div id='cities'></div>

首先，您可能应该定义一个函数，根据每行数据选择颜色。 我将使用标准的配色方案。 然后遍历数据，添加彩色线条：

var cities = d3.select('#cities');
var colorPick = d3.scaleOrdinal(d3.schemeCategory10);

data.forEach(d => {
  cities.append('p')
        .style('color', colorPick(d.City))
        .text(d.City + ', ' + d.Country);
});

这就是它的核心。 再加上一点修饰 ，结果看起来像：

这是一个简单的“第一个得到第一颜色，第二个得到第二颜色……”的配色方案。 它适用于很多事情。