根據列選擇d3數據子集

如何修改http://bl.ocks.org/mbostock/3884955以下的代碼以選擇特定列？根據列選擇d3數據子集

var line = d3.svg.line() 
.x(function(d) { return x(d.date); }) 
.y(function(d) { return y(d.temperature); }); 

d3.tsv("data.tsv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    }); 

    var cities = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, temperature: +d[name]}; 
     }) 
    }; 

    });

在以上示例中使用的數據中，有4列：3個城市的日期和3列溫度。在我的使用案例中，我有10個列：3個城市的每個城市的日期和3個變量，即（1 + [3 * 3]）。我想加載整個數據集（用於工具提示），但只想繪製每個城市的變量中的一個，這些變量位於列索引＃1,4和7中。我該怎麼做？（請參閱下面的粗略語法）。

var cities = color.domain().map(function(name) { 
    return { 
    name: name, 
    values: data.map(function(d) { 
     return {date: d.date, maxTemperature: *+d[arrays in column index 1, 4 and 7]*}; 
    }) 
    values2: data.map(function(d) { 
     return {date: d.date, minTemperature: *+d[arrays in column index 2, 5 and 8]*}; 
    }) 
    values3: data.map(function(d) { 
     return {date: d.date, avgTemperature: *+d[arrays in column index 3, 8 and 9]*}; 
    }) 
    }; 
});

來源

2013-10-01 WittyID

我能夠通過添加過濾器關鍵條件來排除我不想繪製的其他數據類別來解決此問題。在上面我使用的例子中，每個城市都有一個最小值，最大值和平均值溫度，並且只想獲取平均溫度。我添加了不包含列標題的過濾器，其中包含「max」或「min」這樣的字符串。

color.domain(d3.keys(data[0]).filter(function(key) 
    { return key !== "date" && key.indexOf("max") == -1 && 
    key.indexOf("min") == -1; });

我不一定知道全部列名是什麼，但在我使用的情況下，不同的變量總是標記爲最大值，最小值或平均這使它成爲一個可行的解決方案給我，但可能不會對於列標題完全未知的人。我最初想根據索引號選擇列，但是這很好。

來源

2013-10-02 03:41:29 WittyID

您不應該對現有代碼進行任何更改。設置cities的方式僅要求您爲所需數據提供一個有意義的名稱，然後再引用它。所以，你會碰到這樣的

var cities = color.domain().map(function(name) { 
return { 
    name: name, 
    values: data.map(function(d) { 
    return {date: d.date, first: +d[name + " first"], second: +d[name + " second"]}; 
    }) 
}; 

d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.first; }); });

注意，當然實際名稱取決於什麼在你的數據。

來源

2013-10-01 13:39:38

我就開始用道歉爲我的不足與JavaScript的深度，但我不能在上面的代碼是如何解決這個問題清楚了。是使用「first：」和「second：」用戶定義的名稱還是d3關鍵字？上面的代碼如何根據索引＃選擇特定的列而不知道他們的名字？此外，因爲我試圖一次調用多個列，我如何用第一，第二，第四等調用v.first（例如）來替代。這種選擇性多列數據調用將是我也用於定義圖表線的y軸（請參閱編輯問題）。 – WittyID

這些名稱是用戶定義的。如果您使用這種技術，您需要知道列名，否則您可以使用['d3.tsv.parseRows（）']（https://github.com/mbostock/d3/wiki/CSV#wiki-tsv_parseRows ）。如果您想使用多個值來確定限制，只需將它們放入數組中並使用'd3.min'（或max）。 –

這在選擇列來爲我工作：

d3.csv("data.csv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { 
    return key == "avg" || key == "additional_columns"; 
    }); 
});

來源

2014-03-22 07:11:46 user3882631

根據列選擇d3數據子集

回答

相關問題