使用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);
});

这是它的核心。使用a little more prettification，结果如下：

这是一个简单的＆＃34;第一个获得第一种颜色，第二种获得第二种颜色，...＆＃34;着色方案。它适用于很多事情。