我有一个包含空值的时间序列折线图,因此在我的线条中留下了空白。我想要做的是选择性地让 d3 线生成器忽略空值并跨越间隙。
如图所示,蓝色系列有间隙。
我的部分问题是我已经对这种数据格式进行了标准化:
[
{"x":1397102460000,"y0":11.4403,"y1":96.5},
{"x":1397139660000,"y0":13.1913,"y1":96.5},
{"x":1397522940000,"y1":96.5},
...
]
因此,当一个系列具有特定时间戳的读数时,另一个系列具有空值。
最终,我可以尝试通过在绘制之前过滤我的数据来解决这个问题,但我希望有一个更聪明的解决方案,也许是关于线生成器的。
我的线生成器非常简单:
line = d3.line()
.x(function(d) {
return ~~_this.x(d[xKey]);
})
.y(function(d) {
return ~~_this.y(d[yKey]);
})
.defined(function(d) {
return d[yKey] || d[yKey] === 0;
});
如果我删除我的 defined 方法,线条会连接起来,但 null y 值会被解释为 0px 而不是不存在。
有没有办法告诉线生成器不要在空数据处包含一个点?
我还应该注意,我使用的是 d3 v4.x。
最佳答案
假设您希望这条线从最后一个有效点到下一个有效点,作为一条直线,最好的想法是按照评论中的建议过滤您的数据。
line.defined 在行中创建间隙,这是预期的行为,也是此函数的用途。
因此,如果您不想过滤数据并且不想创建间隙(使用defined),您可以更改线生成器函数。这不是一个好主意,它是一段丑陋的代码,但它是可行的。
设置一个计数器:
var counter;
如果值有效 (!= null),增加计数器。如果不是,则告诉行生成器保留最后一个有效值:
var line = d3.line()
.x((d, i) => {
if (data[i].y) {
return xScale(d.x)
} else {
return xScale(data[counter].x)
}
})
.y((d, i) => {
if (d.y) {
counter = i;
return yScale(d.y)
} else {
return yScale(data[counter].y)
}
});
在此演示中,该行从第五个数据点(最后一个有效值)跳到第九个数据点(下一个有效值):
var w = 500,
h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var data = [{
x: 10,
y: 50
}, {
x: 20,
y: 70
}, {
x: 30,
y: 20
}, {
x: 40,
y: 60
}, {
x: 50,
y: 40
}, {
x: 60,
y: null
}, {
x: 70,
y: null
}, {
x: 80,
y: null
}, {
x: 90,
y: 90
}, {
x: 100,
y: 20
}];
var xScale = d3.scaleLinear()
.domain([0, 100])
.range([30, w - 20]);
var yScale = d3.scaleLinear()
.domain([0, 100])
.range([h - 20, 20]);
var counter;
var line = d3.line()
.x((d, i) => {
if (data[i].y) {
return xScale(d.x)
} else {
return xScale(data[counter].x)
}
})
.y((d, i) => {
if (d.y) {
counter = i;
return yScale(d.y)
} else {
return yScale(data[counter].y)
}
});
svg.append("path")
.attr("d", line(data))
.attr("stroke-width", 2)
.attr("stroke", "teal")
.attr("fill", "none");
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," + (h - 20) + ")")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(30,0)")
.call(yAxis);<script src="https://d3js.org/d3.v4.min.js"></script>
关于javascript - 强制 d3 折线图忽略空值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40873931/
我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道,是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔?posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr
我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。
在读取/解析文件(使用Ruby)时忽略某些行的最佳方法是什么?我正在尝试仅解析Cucumber.feature文件中的场景,并希望跳过不以Scenario/Given/When/Then/And/But开头的行。下面的代码有效,但它很荒谬,所以我正在寻找一个聪明的解决方案:)File.open(file).each_linedo|line|line.chomp!nextifline.empty?nextifline.include?"#"nextifline.include?"Feature"nextifline.include?"Inorder"nextifline.include?
我正在尝试查询我的Rails数据库(Postgres)中的购买表,我想查询时间范围。例如,我想知道在所有日期的下午2点到3点之间进行了多少次购买。此表中有一个created_at列,但我不知道如何在不搜索特定日期的情况下完成此操作。我试过:Purchases.where("created_atBETWEEN?and?",Time.now-1.hour,Time.now)但这最终只会搜索今天与那些时间的日期。 最佳答案 您需要使用PostgreSQL'sdate_part/extractfunction从created_at中提取小时
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我正在尝试通过正则表达式拆分参数列表。这是一个带有我的参数列表的字符串:"a=b,c=3,d=[1,3,5,7],e,f=g"我想要的是:["a=b","c=3","d=[1,3,5,7]","e","f=g"]我试过先行,但Ruby不允许使用动态范围后行,所以这行不通:/(?如何让正则表达式忽略方括号中的所有内容? 最佳答案 也许这样的东西对你有用:str.scan(/(?:\[.*?\]|[^,])+/)编辑再三考虑。简单的非贪婪匹配器在某些嵌套括号的情况下会失败。 关于Ruby正则
我要下载http://foobar.com/song.mp3作为song.mp3,而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点? 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.
我正在使用Jekyll构建一个站点,我的代码中有一些看起来像{{}}(液体标签)的东西。我希望它在Jekyll完成生成网站后最终出现在输出html中,但Jekyll将其解释为其他任何标记。有没有办法让Jekyll只忽略这个标签的这个特定实例? 最佳答案 使用{%raw%}标签:{%raw%}{{...}}{%endraw%}此代码段将生成{{...}}。 关于ruby-忽略Jekyll中的特定标签,我们在StackOverflow上找到一个类似的问题: htt
我有一个包含许多换行符和空格的字符串。我需要将它拆分成固定长度的子字符串。例如a="Thisissome\nText\nThisissometext"现在我想把它分成长度为17的字符串。所以现在它应该导致["Thisissome\nText","\nThisissometex","t"]评论:我的字符串可能包含任何字符(空格/单词等) 最佳答案 "Thisissome\nText\nThisissometext".scan(/.{1,17}/m)#=>["Thisissome\nText","\nThisissometex","t"
我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan