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

Filter data with variable at time of parsing

本文关键字：变量 过滤 数据      更新时间：2023-09-26

您好，提前感谢您的时间。我有一个可视化效果，它将存在于 iframe 中并从父页面获取一个变量，该变量将定义要绘制的线条。我能够做到这一点，它正在起作用。现在我的问题是我在画线时正在过滤。它可以工作，但如果我希望我的 Y 刻度轴域反映所选实体的最小值和最大值，则无济于事，因此我需要：

  • 解析数据时提前筛选（最好）
  • 在我的 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]};
})
};
});

任何帮助表示赞赏，谢谢！

由于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; }); })
  ]);

这是Plunker：https://plnkr.co/edit/dx2CFXbvXJOEJUrFhYwI?p=preview

相关文章：