d3js时间轴刻度持续时间动态设置

Question

I am trying to create a bar graph with time x-axis. I am having trouble in dynamically setting ticks values.

.ticks(d3.time.minutes, 10)

above code works for me, but when data is more i want the duration to be increased to 30 minutes ie,

.ticks(d3.time.minutes, 30)

I have tried,

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

above ways and none worked. JSfiddle link for my code: http://jsfiddle.net/hpjqt1dL/20/ . I have put both datasets in the fiddle there(with less and more values). Can someone please help me with this.

Thanks in advance....

[UPDATE:] Actually, its not just 2 conditions I want. My updated code is:

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);
        }

I also want to adjust the bar width and place ticks in centre of bar. Is there any way to achieve this with dynamically by code in time scale.

http://www.d3noob.org/2014/02/making-bar-chart-in-d3js.html , this tutorial does it but with ordinal axis.

[UPDATE]: Firstly, many thanks for the help. In regard to adjusting width, below are the links to screenshots of my graphs:

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

Hope that gives some idea of what I mean by bar width. Let me know if it is not clear.

As Lars suggested I tried ordinal axis, jsfiddle of same is here: http://jsfiddle.net/hpjqt1dL/28/ . If you observe there the tickvalues are exact values as in data like ..9:06, 10.45, 11.06. I want tick values to be ranged properly at regular intervals.

Answer 1

.ticks() doesn't take a function argument, but in your case you don't need it, because you're not referencing any dynamic data bound to any elements. All you need is

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

Complete demo here .