D3.js D3图表在x轴上绘制平日折线图时发布
我在x轴上有工作日,在y轴上有来自(EC)的数字,当我尝试绘制折线图时,该线沿y轴绘制,不采用工作日值,也不在x轴上显示工作日 我被困在这里,你能帮我一下吗。我的代码在JSFIDLE中 期待着这个问题的解决方案,非常感谢您的帮助,找到我所缺少的东西D3.js D3图表在x轴上绘制平日折线图时发布,d3.js,D3.js,我在x轴上有工作日,在y轴上有来自(EC)的数字,当我尝试绘制折线图时,该线沿y轴绘制,不采用工作日值,也不在x轴上显示工作日 我被困在这里,你能帮我一下吗。我的代码在JSFIDLE中 期待着这个问题的解决方案,非常感谢您的帮助,找到我所缺少的东西 提前感谢问题是您试图使用d3.time.format().parse()将一周中的几天转换为日期。这是不可能的,因为“星期一”可以是“星期一”的任何日期 因此,与调用format.parse(d.Day)不同,您需要另一种方法将一周中的一天转换为日
提前感谢问题是您试图使用
d3.time.format().parse()
将一周中的几天转换为日期。这是不可能的,因为“星期一”可以是“星期一”的任何日期
因此,与调用format.parse(d.Day)
不同,您需要另一种方法将一周中的一天转换为日期
您可以从建立一个星期日开始,该日期将作为一周的第一天,并显示在图表中最左侧。它可以是过去或将来任何时候的任何一个星期天,但让我们使用昨天的星期天。这意味着:
var aSunday = Number( new Date(2014, 0, 5) ) // Sunday, Jan 5th, 2014
现在,对于一周中的每一天,您需要计算该天与之前的星期日之间的偏移量。首先,您需要一个包含一周中所有日期的数组,从星期日开始:
var days=['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday']
这样,days.indexOf(d.Day)
将返回该天相对于周日的索引。例如,“星期二”
的索引为2,即星期天之后的2天。如果将其乘以每24小时一天的毫秒数,则得到需要添加到aSunday
中的毫秒数,以获得表示下一个星期二的日期对象:
var msPerDay = 86400000 // 24 hours in milliseconds
var dateFn = function(d) { return aSunday + msPerDay * days.indexOf(d.Day); };
话虽如此,可能最适合的做法是抛弃d3.time.scale()
而改用d3.scale.ordinal()
,它使用顺序刻度,对日期或时间一无所知。
另外,想想看,基于日期的方法可能不适合夏令时。我强烈推荐基于顺序的方法。Hmmm,在我看来,这是一个错误。你可以归档。谢谢你的指点,我已经创建了一个问题,希望能得到回复。@Shanthi,不客气。很乐意帮忙。请单击复选标记按钮“接受”此答案。
var msPerDay = 86400000 // 24 hours in milliseconds
var dateFn = function(d) { return aSunday + msPerDay * days.indexOf(d.Day); };