如何根据数据量动态设置d3 xAxis时间刻度(即每小时少于一天的数据,每天结束所有事情)

时间:2019-05-02 17:06:54

标签: javascript d3.js

我正在创建d3折线图,用户可以在其中随时间输入数据。因此,我希望能够根据存在的数据量来动态调整xAxis的刻度数或刻度间隔。

现在,我的记号设置为Style.Triggers,这非常好,除了在新用户输入数据的第一天,因为直到第二天才有任何记号。

我希望能够对其进行配置,以便根据d.date的长度设置刻度间隔,以便如果数据天少于日期,则间隔应为// the 1st BackgroundProperty by Style.Setters Style style = new Style(typeof(Button)); style.Setters.Add(new Setter(Button.BackgroundProperty, imageSourceOn)); // the 2nd BackgroundPropert by Style.Triggers Setter setter = new Setter(); setter.Property = Button.BackgroundProperty; setter.Value = imageSourceOff; Trigger trigger = new Trigger(); trigger.Property = IsMouseOverProperty; trigger.Value = true; trigger.Setters.Add(setter); style.Triggers.Add(trigger); Button button = new Button(); button.Margin = new Thickness(0, 5, 80, 5); button.BorderThickness = new Thickness(0); button.Name = name; button.Click += handler; button.VerticalContentAlignment = VerticalAlignment.Bottom; // setting Style button.Style = style; return button;

如果您有更好或更有效的方法来确保第一天数据的日期仍然有变动,请告诉我,我不赞成这种策略

我尝试在刻度内使用三元运算符,这样:

d3.timeDay.every(1)

但是我遇到了d3.timeHour.every(1)错误

然后我尝试在刻度内使用d3.range并将当前日期的范围设置为一个月前(使用momentjs,.call(d3.axisBottom(xScale) .ticks(dataPoints.date.length > 1 ? d3.timeDay.every(1) : d3.timeHour.every(1) ) .tickFormat(d3.timeFormat('%a %b %d %Y'))); t.range is not a function相同)

moment()

但是第一天仍然没有滴答声,因为它仍处于一天间隔内

我还在看我在这里(Dynamically changing the number of ticks in D3)看到的堆栈溢出答案:

因此将new Date()设置为.ticks(d3.range( moment().subtract(1, 'months'), moment(), 1)) .tickFormat(d3.timeFormat(d3.timeFormat('%a %b %d %Y')));

然后将nNumberOfTicks设置为我的三元运算符

ticks()

,但是在进行onChange更新时,我无法弄清楚nNumberOfTicks函数应该是什么,或者var nNumberOfTicks = dataPoints.date.length > 1 ? d3.timeDay.every(1) : d3.timeHour.every(1) 应该是什么样子,因为我使用的是updateNumberofticks而不是常规值,因此感觉不适合我的问题

this.value

我也不确定d.date.length是否会生效,因为那只是数据条目的数量而不是唯一日期的数量,因此如果有人今天在d.date添加3个新数据点.length将为3,但仍然少于一天

我只是不知道如何将日期密钥的值与日期密钥的值进行比较,而不必将其不必要地复杂化,我觉得必须有一种更有效的方法,例如可能始终在当前范围内打勾其余数据的前一天?

这是我的图表代码(这是一个基于键d3.timeDay.every()的嵌套数据的多线图,xAxis是d3.select('#nNumberOfTicks').on('change', function() { updatenumberofticks(+this.value); vis.select('.xaxis').transition().call(xAxis.ticks(+this.value)); }); yAxis是d.mood,介于0和100之间的整数),我添加了一条指向特定相关行的注释:

d.date

我希望在xAxis上设置刻度线,以便在某人输入数据的第一天,他们将看到当天的刻度线,并且当他们在不同的日期添加更多数据时,间隔将是每天一个刻度线 >

我知道,因为显示了数据点,所以他们可以仅假设它是当前日期,但是从用户体验的角度来看,将xAxis留空直到它们至少有两天的数据量是不理想的

0 个答案:

没有答案