javascript - 使用 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没有任何 native 显示功能。它依赖于 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 ，结果如下:

这是一个简单的“第一个获得第一种颜色，第二个获得第二种颜色，...”的着色方案。它对很多事情都很有效。