如何在 d3 中绘图时仅从 csv 中绘制和符号化选定的列？

Question

如何在 Dominion 上也应用我在 Catan 上使用的相同符号格式？而且还只保留 Catan、Dixit 和 Dominion，不显示其余的？我需要加载和读取所有数据，因为稍后我会需要它们，但对于此图表，我只需要显示三列。我有一些我认为相关的代码片段：

//-----------------------------DATA-----------------------------//
const timeConv = d3.timeParse("%m-%d-%Y");
const dataset = d3.csv("ratings.csv");

    dataset.then(function(data) {
        var slices = data.columns.slice(1).map(function(id) {
            return {
                id: id,
                values: data.map(function(d){
                    return {
                        date: timeConv(d.date),
                        measurement: +d[id]
                    };
                })
            };
        });



//----------------------------LINES-----------------------------//
const line = d3.line()
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.measurement); }); 


let id = 0;
const ids = function () {
    return "line-"+id++;
}

    //----------------------------LINES-----------------------------//
    const lines = svg.selectAll("lines")
        .data(slices)
        .enter()
        .append("g");
    
        lines.append("path")
        .attr("class", ids)
        .attr("d", function(d) { return line(d.values); });
    
        lines.append("text")
        .attr("class","serie_label")
        .datum(function(d) {
            return {
                id: d.id,
                value: d.values[d.values.length - 1]}; })
        .attr("transform", function(d) {
                return "translate(" + (xScale(d.value.date) + 10)  
                + "," + (yScale(d.value.measurement) + 5 ) + ")"; })
        .attr("x", 5)
        .text(function(d) { return  d.id; });


//----------------------------Symbols-----------------------------//
    svg.selectAll("myDots")
      .data(slices)
      .enter()
        .append('g')
        .style("fill", "white")
      // Second we need to enter in the 'values' part of this group
      .selectAll("myPoints")
      .data(function(d){ return slices[0].values.filter(function(d,i) { return i%3 == 2})})
      .enter()
      .append("circle")
      .attr("class", ids)
        .attr("cx", function(d) { return xScale(d.date) } )
        .attr("cy", function(d) { return yScale(d.measurement);}) 
        .attr("r", 15)
        .attr("stroke", "black")

这是我现在的图表：

和数据样本：

date    Catan   Dominion    Codenames   Terraforming    Magic   Dixit
11/1/2016   213 46  20  69  138 141
12/1/2016   216 47  20  28  138 143
1/1/2017    219 50  20  24  141 146
2/1/2017    224 52  22  19  143 151
3/1/2017    226 54  22  17  144 155
4/1/2017    230 55  24  13  144 157
5/1/2017    234 55  28  9   145 158
6/1/2017    236 55  32  8   147 159
7/1/2017    239 55  32  8   145 160
8/1/2017    245 57  33  7   146 163
9/1/2017    250 57  34  7   149 166
10/1/2017   251 58  36  7   150 169
11/1/2017   255 60  36  6   151 170
12/1/2017   264 61  35  6   150 171
1/1/2018    270 61  36  6   152 173
2/1/2018    274 65  39  5   154 182

Answer 1

映射数据以过滤掉未包含在 keys 中的列：

d3.csv("ratings.csv").then(data => {
  const keys = ['date', 'Dixit', 'Dominion'];
  const filteredData = data.map(item => 
    keys.reduce((obj, key) => ({...obj, [key]: item[key]}), {}));  
  ... 
});

如何在 d3 中绘图时仅从 csv 中绘制和符号化选定的列？

How plot and symbolize only selected columns from csv in plotting in d3?

csv

d3.js

slice

multiple-columns

linechart