0

我一直在创建一些图表来绘制财务结果中的日内数据。通常这是每十分钟生成的值。这各不相同,但它是一个很好的例子。因此,我在很长一段时间内无法获得信息,例如周末市场关闭时以及晚上 5:00 到早上 9:00 之间。我尝试为 x 轴创建自定义时间刻度,但最终最好的结果是只使用序数刻度。它工作得很好,并给出了我和阅读图表的人想要的结果,即线图中没有间隙和均匀的空间数据点。(它的约定)

我的问题是我如何知道在这个 xAxis 上的正确位置绘制自定义刻度,因为我在一个名为 ticks.major 的数组中生成它们。下面的示例显示了我如何生成轴以及正确的天数。但它们都被绘制在图表的开头。任何帮助表示感谢。

var xScale = d3.scale.ordinal()
    //var xScale = scaleWeekday()...custom timescale no longer used
        .domain(xDomain)
        .rangeBands([0,(plotWidth-yLabelOffset)])

 var xAxis = d3.svg.axis()
        .scale(xScale)
        //.tickValues(ticks.major)//used to create tick d3 time scale axis
        .tickFormat(function (d,i) {
          return ticks.major[i]
        })
        .tickSize(yOffset/2)
        .orient("bottom");

var xLabel=plot.append("g")
        .attr("class",media+"xAxis")
        .attr("transform",function(){
            if(yAlign=="right") {
                return "translate("+(margin.left)+","+(plotHeight+margin.top)+")"
            }
             else {return "translate("+(margin.left+yLabelOffset)+","+(plotHeight+margin.top)+")"}
            })
        .call(xAxis);

它看起来像这样: 在此处输入图像描述

4

1 回答 1

0

我认为我犯的错误是,通过使用 tick.major 数组,它将刻度值应用于传递的前 12 个日期,因为这就是 tick.major 数组中的所有内容。然后因为在 tick.majore 数组中没有更多的日期,所以该系列中没有任何其他日期的标签。最好在 tickFormetter 中应用测试以查看特定数据点的当前日期是否与前一个数据点的日期不同。然后返回一个勾号。像这样

.tickFormat(function (d,i) {
            if(i>0) {
                var day=d.getDay()
                var yesterday=data[i-1].date.getDay()
                console.log(day,yesterday)
                if(day!=yesterday) {
                    return d
                }
            }
        })

返回的 d 需要一些日期格式以使其可读

于 2016-07-25T12:23:36.767 回答