我正在创建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留空直到它们至少有两天的数据量是不理想的