d3js時間軸刻度持續時間動態設置

Question

我正在嘗試創建帶有時間x軸的條形圖。 我在動態設置刻度值時遇到麻煩。

.ticks(d3.time.minutes, 10)

上面的代碼對我有用，但是當數據更多時，我希望持續時間增加到30分鍾，即

.ticks(d3.time.minutes, 30)

我努力了，

.ticks(function () { return (dataPassed.length > 5) ? ((d3.time.minutes, 30)) : ((d3.time.minutes, 10)); })
.tickValues(xScale.domain())

以上方法，沒有任何工作。 我的代碼的JSfiddle鏈接： http : //jsfiddle.net/hpjqt1dL/20/ 。 我將兩個數據集都放在了小提琴中（值越來越小）。 有人可以幫我嗎

提前致謝....

[更新：]實際上，它不僅是我想要的2個條件。 我更新的代碼是：

if (dataPassed.length < 4)
        {
            var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom')
                    .ticks(d3.time.minutes, 10)
                    .tickFormat(d3.time.format('%H:%M'))
                    .tickSize(5);

            var boxNoBarWidth = (svgWidth + widthPad) / (dataPassed.length + 3);

        }
        else if (dataPassed.length > 3 && dataPassed.length < 6)
        {
            var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom')
                    .ticks(d3.time.minutes, 15)
                    .tickFormat(d3.time.format('%H:%M'))
                    .tickSize(5);

           var boxNoBarWidth = (svgWidth + widthPad) / (dataPassed.length + 8);
        }
        else if (dataPassed.length > 5) {
            var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom')
                    .ticks(d3.time.minutes, 30)
                    .tickFormat(d3.time.format('%H:%M'))
                    .tickSize(5);

           var boxNoBarWidth = (svgWidth + widthPad) / (dataPassed.length + 10);
        }

我也想調整條形寬度並將刻度線放置在條形中心。 有什么方法可以通過時間尺度上的代碼動態地實現這一目標。

http://www.d3noob.org/2014/02/making-bar-chart-in-d3js.html ，本教程使用序數軸進行此操作。

[更新]：首先，非常感謝您的幫助。 關於調整寬度，以下是指向我的圖表的屏幕截圖的鏈接：

http://imgur.com/mkvnltx,TijKM8B#0 ， http://imgur.com/mkvnltx,TijKM8B#1

希望能對我所說的條寬有所了解。 讓我知道是否不清楚。

正如Lars建議的那樣，我嘗試了序數軸，相同的jsfiddle在這里： http : //jsfiddle.net/hpjqt1dL/28/ 。 如果您在那里觀察到，滴答值就是精確的值，如..9：06、10.45、11.06等數據。 我希望刻度值能夠以固定的間隔進行適當調整。

Answer 1

.ticks()不需要函數參數，但是在您的情況下，您不需要它，因為您沒有引用綁定到任何元素的任何動態數據。 所有你需要的是

.ticks(dataPassed.length > 5 ? (d3.time.minutes, 30) : (d3.time.minutes, 10))

在此處完成演示。