Question

我一直在创建一些图表来绘制财务结果中的日内数据。通常这是每十分钟生成一个值。这有所不同，但它是一个很好的例子因此，有很长一段时间我不会获得信息，例如当市场周末关闭时以及晚上5:00 pm和早上9:00 pm之间。我尝试为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);

它看起来像这样：

Answer 1

我认为我犯的错误是通过使用tick.major数组，它将tick值应用于传递的前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需要一些日期格式化才能使其可读

自定义刻度顺序为d3

1 个答案: