javascript - D3 线性梯度到 geojson 路径根据其值

Question

我有带线的 geojson 文件，每条线都有不同的值(例如不同的速度)我想根据它们的速度值为这些线分配渐变颜色。是否可以？我发现仅针对整个页面或 div 的渐变的描述。

我的代码:

var speed = d3.json("speed.geojson", function (error, data){
            svg.append("svg")
            .selectAll ("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr ("d", path)
            .style ("stroke", "green") //how to insert gradient here?
            .style ("stroke-width", 2)
            });

我的 geojson:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 0,
            "properties": {
                "id": null,
                "speed": 5
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        16.370509236468372,
                        48.212650342706375
                    ],
                    [
                        16.37508962063344,
                        48.22070071487528
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "id": 1,
            "properties": {
                "id": null,
                "speed": 6
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        16.376061217274515,
                        48.2293062851248
                    ],
                    [
                        16.39021876833018,
                        48.21639792975052
                    ],
                    [
                        16.39021876833018,
                        48.21639792975052
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "id": 2,
            "properties": {
                "id": null,
                "speed": 2
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        16.38369519088296,
                        48.2021015791747
                    ],
                    [
                        16.391329164491406,
                        48.21251154318622
                    ],
                    [
                        16.390079968810024,
                        48.21639792975052
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "id": 3,
            "properties": {
                "id": null,
                "speed": 9
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        16.376061217274515,
                        48.22944508464495
                    ],
                    [
                        16.374950821113288,
                        48.22083951439543
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "id": 4,
            "properties": {
                "id": 3,
                "speed": 7
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        16.37078683550868,
                        48.21292794174668
                    ],
                    [
                        16.383417591842655,
                        48.2021015791747
                    ],
                    [
                        16.383417591842655,
                        48.2021015791747
                    ]
                ]
            }
        }
    ]
}

Answer 1

你想要一个 scale为了这。比例尺将输入域中的值(例如速度)映射到输出域中的值(例如颜色)。它是这样工作的。

 var scale = d3.scale.linear().domain([0, maxSpeed]).range(["red", "green"]);
 ...
 svg.append("svg")
        .selectAll ("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr ("d", path)
        .style ("stroke", function(d) { return scale(d.properties.speed); })
        .style ("stroke-width", 2);

您当然可以调整颜色。要确定数据中的最大速度，您可以找到帮助程序 d3.max有帮助:

var maxSpeed = d3.max(data.features, function(d) { return d.properties.speed; });