从D3.js中完全相同的数据数组向多个路径添加颜色

这个问题可能有误导性，但我不知道如何说得更准确。 基本上，我的数据如下：

    {
        "pitcher": 547943,
        "pitch_type": "CH",
        "velo": 80.15329032258065,
        "hmov": 0,
        "vmov": 0,
        "name": "hyun-jin-ryu"
      },
    {
      "pitcher": 547943,
      "pitch_type": "CH",
      "velo": 80.15329032258065,
      "hmov": 12.729861677419354,
      "vmov": 5.4084,
      "name": "hyun-jin-ryu"
    },
    {
        "pitcher": 547943,
        "pitch_type": "CU",
        "velo": 72.77105263157895,
        "hmov": 0,
        "vmov": 0,
        "name": "hyun-jin-ryu"
      },
    {
      "pitcher": 547943,
      "pitch_type": "CU",
      "velo": 72.77105263157895,
      "hmov": -13.357961403508773,
      "vmov": -13.062238596491229,
      "name": "hyun-jin-ryu"
    }

我想为每种音高类型得到一条路径，从（hmov[0]，vmov[0]）或0,0开始，到（hmov[1]，vmov[1]）。我还创建了一个与“velo”关联的色标，但找不到将其指定给路径笔划的方法。我怀疑这与有2个velo值有关，但不能确定这是否是问题所在

    //Loop through each pitch    
    dataNest.forEach(function(d) { 
        svg.append("path")
            .data([data])
            .attr("d", pitchLine(d.values))
            .attr("stroke", function(d) { return veloScale(d); }) //Problematic part
            .attr("stroke-witdh", 2);
    });

完整代码：

const margin = {top: 25, bottom: 25, right: 25, left: 25};
const height = 300 - margin.top - margin.bottom;
const width = 300 - margin.left - margin.right;

//Set Ranges
let x = d3.scaleLinear().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);
let veloScale = d3.scaleSequential(d3.interpolateViridis);


//Set line generator
let pitchLine = d3.line()
            .x(function(d) { return x(d.hmov); })
            .y(function(d) { return y(d.vmov); });

//Add SVG canvas
let svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

///////////////////////////////

//Get the Data
d3.json("ryu.json").then(function(data) {
    data.forEach(function(d) {
        d.hmov = +d.hmov;
        d.vmov = +d.vmov;
        d.velo = +d.velo;
    });

    //Scales
    x.domain(d3.extent(data, function(d) { return d.hmov; }));
    y.domain(d3.extent(data, function(d) { return d.vmov; }));
    veloScale.domain(d3.extent(data, function(d) { return d.velo; }))

    //Nesting data
    let dataNest = d3.nest()
        .key(function(d) { return d.pitch_type; })
        .entries(data);

    //Loop through each pitch    
    dataNest.forEach(function(d) { 
        svg.append("path")
            .data([data])
            .attr("d", pitchLine(d.values))
            .attr("stroke", function(d) { return veloScale(d); })
            .attr("stroke-witdh", 2);
    });

---

应该更新代码中循环数据嵌套数组的部分，以便

a） 数据以正确的级别连接，即创建每个路径的dataNest数组和路径基准的d.Value

b） stroke Color函数从要映射到颜色的数组中传入值。由于d.values数组中的每个元素可能具有不同的velo值，因此需要决定使用哪一个。下面的示例使用数组中第一个元素的velo值

//Create a separate g element to contain the path, based on the nested array    
let pitch = svg.selectAll(".pitch-type")
            .data(dataNest)
            .enter()
            .append("g")
     //for each g element, add a path and assign the d.values for that path
        pitch.append("path")
          .datum(d => d.values)
          .attr("d", d => pitchLine(d))
//pass in the velo value to get a colour
          .attr("stroke", d => veloScale(d[0].velo))
          .attr("stroke-witdh", 2);

let数据=[{
“投手”：547943，
“音高类型”：“CH”，
“速度”：80.1532903225065，
“hmov”：0，
“vmov”：0，
“姓名”：“hyun jin ryu”
},
{
“投手”：547943，
“音高类型”：“CH”，
“速度”：80.1532903225065，
“hmov”：12.729861677419354，
“vmov”：5.4084，
“姓名”：“hyun jin ryu”
},
{
“投手”：547943，
“音高类型”：“CU”，
“velo”：72.77105263157895，
“hmov”：0，
“vmov”：0，
“姓名”：“hyun jin ryu”
},
{
“投手”：547943，
“音高类型”：“CU”，
“velo”：72.77105263157895，
“hmov”：-13.357961403508773，
“vmov”：-13.062238596491229，
“姓名”：“hyun jin ryu”
}]
常量边距={顶部：25，底部：25，右侧：25，左侧：25}；
常量高度=300-margin.top-margin.bottom；
常量宽度=300-margin.left-margin.right；
//设定范围
设x=d3.scaleLinear（）.range（[0，width]）；
设y=d3.scaleLinear（）.range（[height，0]）；
设veloScale=d3.scaleSequential（d3.interpolateViridis）；
//固定线路发生器
设pitchLine=d3.line（）
.x（函数（d）{返回x（d.hmov）；}）
.y（函数（d）{返回y（d.vmov）；}）；
//添加SVG画布
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
data.forEach（函数（d）{
d、 hmov=+d.hmov；
d、 vmov=+d.vmov；
d、 速度=+d.velo；
});
//天平
x、 域（d3.extent（数据，函数（d）{返回d.hmov；}））；
y、 域（d3.extent（数据，函数（d）{返回d.vmov；}））；
域（d3.extent（数据，函数（d）{return d.velo；}））
//嵌套数据
让dataNest=d3.nest（）
.key（函数（d）{返回d.pitch_type；}）
.条目（数据）；
让pitch=svg。选择All（“.pitch type”）
.数据（数据嵌套）
.输入（）
.附加（“g”）
pitch.append（“路径”）
.基准（d=>d.值）
.attr（“d”，d=>俯仰线（d））
.attr（“笔划”，d=>veloScale（d[0].velo））
.attr（“中风”，2）