Javascript D3根据其值到geojson路径的线性梯度

我有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
                    ]
                ]
            }
        }
    ]
}

你想要一个新的答案。比例将输入域中的值（例如速度）映射到输出域中的值（例如颜色）。它是这样工作的

 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);

你当然可以调整颜色。要确定数据中的最大速度，您可能会发现帮助程序非常有用：

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