javascript - 在解析时使用变量过滤数据

Question

您好，提前感谢您的宝贵时间。我有一个可视化，它将存在于 iframe 中并从父页面获取一个变量，该变量将定义要绘制的线。我能够做到这一点并且它正在发挥作用。现在我的问题是我在画线时正在过滤。它可以工作，但如果我希望 Y 缩放轴域反射(reflect)所选实体的最小值和最大值，则没有帮助，因此我需要:

• 在解析数据时提前过滤(首选)
• 在我的 Y 尺度轴域中有一个过滤函数，以重复我在直线函数中的变量拉力

不幸的是，我真的不知道如何实现这一目标。我这里有一个笨蛋: https://plnkr.co/edit/mtRewHwcRjQiIS4ymzoW

在我在这里过滤的代码中:

rank.append("path")
.attr("clip-path", "url(#clipA)")
.filter(function(d) { return d.name === guid })
.attr("class", "line")
.attr("d", function(d) {return line(d.values); })
.style("stroke", "#158fcf" );       
});

我在此处拉出 Y 刻度轴的最大值和最小值:

  xScale.domain(d3.extent(data, function(d) {return +d.date; }));

  yScale.domain([
  d3.min(ranks, function(c) { return d3.min(c.values, function(v) { return v.rank; }); }),
  d3.max(ranks, function(c) { return d3.max(c.values, function(v) { return v.rank; }); })
  ]);

这就是我解析数据的地方:

// Read in data
d3.csv("data.csv", function(error, data){
if (error) throw error;

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

// Format the data field
data.forEach(function(d){
d.date = parseDate(d.date);
});

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

感谢任何帮助，谢谢!

Answer 1

由于 rank 使用 ranks 作为数据，因此您可以使用相同的过滤器:

var ranksFiltered = ranks.filter(function(d) { return d.name === guid });

然后，将其用于 yScale 范围:

 yScale.domain([
  d3.min(ranksFiltered, function(c) { return d3.min(c.values, function(v) { return v.rank; }); }),
  d3.max(ranksFiltered, function(c) { return d3.max(c.values, function(v) { return v.rank; }); })
  ]);

这是骗子:https://plnkr.co/edit/dx2CFXbvXJOEJUrFhYwI?p=preview