d3.min / d3.max - 获取相关日期的值答案

【问题标题】：d3.min / d3.max - getting values with related dated3.min / d3.max - 获取相关日期的值
【发布时间】：2015-08-17 09:30:25
【问题描述】：

我正在使用 d3.js 显示一些基于 csv 文件的线图，该文件包含每天不同关键字的 SERP 排名。

csv 文件的结构如下所示：

Keyword,Date,Google
Keyword1,2015/5/24,6
Keyword1,2015/5/25,6
Keyword1,2015/5/26,6
Keyword1,2015/5/27,6
Keyword1,2015/5/28,6
Keyword1,2015/5/29,6
Keyword1,2015/5/30,6
Keyword1,2015/5/31,6
Keyword1,2015/6/1,6
Keyword1,2015/6/2,6
Keyword1,2015/6/3,6
Keyword1,2015/6/4,6
Keyword1,2015/6/6,6
Keyword1,2015/6/7,6
Keyword1,2015/6/8,6
Keyword1,2015/6/9,6
Keyword1,2015/6/10,6
Keyword1,2015/6/11,6
Keyword1,2015/6/12,6
Keyword1,2015/6/13,6
Keyword1,2015/6/14,6
Keyword1,2015/6/16,6
Keyword1,2015/6/17,6
Keyword1,2015/6/18,6
Keyword1,2015/6/19,6
Keyword1,2015/6/20,6
Keyword1,2015/6/21,20
Keyword1,2015/6/22,20
Keyword1,2015/6/23,20
Keyword1,2015/6/24,20
Keyword1,2015/6/25,21
Keyword1,2015/6/26,21
Keyword1,2015/6/27,21
Keyword1,2015/6/28,21
Keyword1,2015/6/29,21
Keyword1,2015/6/30,21
Keyword1,2015/7/1,21
Keyword1,2015/7/2,21
Keyword1,2015/7/3,22
Keyword1,2015/7/4,22
Keyword1,2015/7/5,22
Keyword1,2015/7/6,22
Keyword1,2015/7/7,22
Keyword1,2015/7/8,22
Keyword1,2015/7/9,22
Keyword1,2015/7/10,22
Keyword1,2015/7/11,22
Keyword1,2015/7/12,22
Keyword1,2015/7/15,22
Keyword1,2015/7/16,21
Keyword1,2015/7/19,21
Keyword1,2015/7/20,21
Keyword1,2015/7/21,21
Keyword1,2015/7/22,21
Keyword1,2015/7/24,21
Keyword1,2015/7/25,20
Keyword1,2015/7/26,21
Keyword1,2015/7/27,21
Keyword1,2015/7/28,22
Keyword1,2015/7/29,20
Keyword1,2015/7/30,20
Keyword1,2015/7/31,20
Keyword1,2015/8/1,21
Keyword1,2015/8/3,22
Keyword1,2015/8/4,22
Keyword1,2015/8/5,18
Keyword1,2015/8/6,35
Keyword1,2015/8/7,5
Keyword1,2015/8/8,5
Keyword1,2015/8/9,3
Keyword1,2015/8/10,3
Keyword1,2015/8/11,3
Keyword1,2015/8/12,3
Keyword1,2015/8/13,3
Keyword1,2015/8/14,3
Keyword1,2015/8/15,3
Keyword1,2015/8/16,3
Keyword1,2015/8/16,6
Keyword2,2015/5/6,40
Keyword2,2015/5/7,39
Keyword2,2015/5/8,41
Keyword2,2015/5/9,41
Keyword2,2015/5/10,41
Keyword2,2015/5/11,48
Keyword2,2015/5/12,45
Keyword2,2015/5/13,44
Keyword2,2015/5/14,45
Keyword2,2015/5/15,49
Keyword2,2015/5/16,49
Keyword2,2015/5/17,91
Keyword2,2015/5/18,26
Keyword2,2015/5/19,27
Keyword2,2015/5/20,26
Keyword2,2015/5/21,55
Keyword2,2015/5/22,51
Keyword2,2015/5/23,51
Keyword2,2015/5/24,56
Keyword2,2015/5/25,26
Keyword2,2015/5/26,59
Keyword2,2015/5/27,59
Keyword2,2015/5/28,58
Keyword2,2015/5/29,58
Keyword2,2015/5/30,58
Keyword2,2015/5/31,53
Keyword2,2015/6/1,57
Keyword2,2015/6/2,56
Keyword2,2015/6/3,57
Keyword2,2015/6/4,59
Keyword2,2015/6/6,28
Keyword2,2015/6/7,54
Keyword2,2015/6/8,53
Keyword2,2015/6/9,51
Keyword2,2015/6/10,57
Keyword2,2015/6/11,59
Keyword2,2015/6/12,60
Keyword2,2015/6/13,55
Keyword2,2015/6/14,55
Keyword2,2015/6/16,55
Keyword2,2015/6/17,55
Keyword2,2015/6/18,59
Keyword2,2015/6/19,57
Keyword2,2015/6/20,59
Keyword2,2015/6/21,29
Keyword2,2015/6/22,27
Keyword2,2015/6/23,29
Keyword2,2015/6/24,29
Keyword2,2015/6/25,31
Keyword2,2015/6/26,28
Keyword2,2015/6/27,28
Keyword2,2015/6/28,27
Keyword2,2015/6/29,35
Keyword2,2015/6/30,35
Keyword2,2015/7/1,34
Keyword2,2015/7/2,29
Keyword2,2015/7/3,29
Keyword2,2015/7/4,25
Keyword2,2015/7/5,25
Keyword2,2015/7/6,27
Keyword2,2015/7/7,27
Keyword2,2015/7/8,27
Keyword2,2015/7/9,27
Keyword2,2015/7/10,30
Keyword2,2015/7/11,29
Keyword2,2015/7/12,29
Keyword2,2015/7/15,26
Keyword2,2015/7/16,25
Keyword2,2015/7/19,23
Keyword2,2015/7/20,27
Keyword2,2015/7/21,28
Keyword2,2015/7/22,28
Keyword2,2015/7/23,21
Keyword2,2015/7/24,21
Keyword2,2015/7/25,20
Keyword2,2015/7/26,20
Keyword2,2015/7/27,27
Keyword2,2015/7/28,26
Keyword2,2015/7/29,27
Keyword2,2015/7/30,20
Keyword2,2015/7/31,20
Keyword2,2015/8/1,21
Keyword2,2015/8/3,21
Keyword2,2015/8/4,21
Keyword2,2015/8/5,20
Keyword2,2015/8/6,19
Keyword2,2015/8/7,33
Keyword2,2015/8/8,30
Keyword2,2015/8/9,29
Keyword2,2015/8/10,29
Keyword2,2015/8/11,29
Keyword2,2015/8/12,26
Keyword2,2015/8/13,27
Keyword2,2015/8/14,37
Keyword2,2015/8/15,33
Keyword2,2015/8/16,36
Keyword2,2015/8/16,36

当我以“正常”方式使用某些代码时，就像我在研究中看到的那样，一切正常：

s.max = d3.max(s.values, function (d) {
    return d.Google;
})
s.min = d3.min(s.values, function (d) {
    return d.Google;
})

这很好用并输出：

关键字1

最佳位置：3

最差排名：35

关键字2

最佳位置：19

最差排名：91

但这只会输出谷歌值。

我想要实现的是与找到的最大值相关的“日期”也会显示出来。

所以我这样尝试：

s.max = d3.max(s.values, function (d) {
    var parseDate = d3.time.format("%d-%m-%Y");
    return d.Google + " (" + parseDate(d.Date) + ")";
})

s.min = d3.min(s.values, function (d) {
    var parseDate = d3.time.format("%d-%m-%Y");
    return d.Google + " (" + parseDate(d.Date) + ")";
})

起初看起来不错。但问题是，有时输出不正确。

关键字1

最佳位置：18 (05-08-2015)

最差排名：6 (31-05-2015)

关键字2

最佳位置：19 (06-08-2015)

最差排名：91 (17-05-2015)

如您所见，Keyword2 的输出是正确的，但 Keyword1 的输出不正确，应该是：

关键字1

最佳位置：3 (09-08-2015)

最差排名：35 (06-08-2015)

我也尝试过不使用“parseDate”，但这会导致同样的错误输出。

谁能告诉我这里出了什么问题，为什么输出不正确？

【问题讨论】：

标签： javascript csv d3.js

【解决方案1】：

看起来在第一个示例中您正在对数字进行排序，而在第二个示例中您正在对字符串进行排序。 3 < 21 和 "3" > "21" 都是真的。这不是世界上最有效的方法，但我想说只需按数字对数组进行排序，然后获取第一个和最后一个元素。比如：

var sorted = s.values.map(function(d) { return d; }).sort(function(a,b) {
  return b.Google - a.Google;
});

// Note: I can never remember if Array.sort is ascending or descending by default. Use with caution.
var max = sorted[0].Google + " (" + formatDate(sorted[0].Date) + ")";
var min = sorted[sorted.length - 1].Google + " (" + formatDate(sorted[sorted.length - 1].Date) + ")";

然后根据 min/max 做任何你想做的事情来构建显示的字符串。

【讨论】：

嗨@Ethan！谢谢你的回复！我首先在我的 s.max/s.min 调用下方添加了您的排序功能，但随后图形被绘制“错误”（从左到右而不是从上到下）。所以我首先切换到return b.Google - a.Google，它具有相同的效果。然后我尝试使用 a.Date 或 b.Date 制作奇怪的图表。然后我添加了新的 var max/var min 行，但没有效果（将我的变量占位符从 s.min 更改为 min）。在我的 d.min/d.max-call 之前和之后我也试过这个，但都没有帮助。
.sort 函数会更改您的 s.values 数组。所以你可能想先复制数组。我也在更新示例以显示如何根据需要计算最小值和最大值。如果您仍然遇到问题，请花一些时间创建一个我们可以修改的工作示例。
您好！并再次感谢您的回复！我也尝试了你编辑的答案，但我无法让它像它应该的那样工作。同时，我也尝试创建一个工作小提琴，但这不知何故。在我的小提琴中，图表丢失了，错误的值每次都会显示 - 无论我选择第一个还是第二个示例 - 这是小提琴链接，也许这会有所帮助...link jsfiddle.net/mot4ox7p/3
您只是在解析 CSV 后没有转换您的值。这是一个包含我的建议的工作版本（第 40 - 50 行）：jsfiddle.net/5m56do4b/2
再次感谢您的支持！但我认为这是一个错误的方向。我在我的工作现场测试环境中实现了你的代码行 40-50，我得到了“Google”的最大和最小可能值，这导致最小值为 1，最大值为 100。但这不是我想要的。和“功能”？ d3.min.... 和 d3.max 已经做了我想要的，但没有得到相关/相关的日期。我有另一个嵌套调用，它创建了这个输出：{"key":"keyword1","values":{"max":"64 - 25-06-2015","min":"38 - 04-08-2015"}} 但我不知道如何访问/输出这些值......