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/。我把两个数据集都放在那里（数值越来越少）。有人可以帮我这个。

提前致谢....

[UPDATE：] 实际上，它不仅仅是我想要的两个条件。我的更新代码是：

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

完整演示here。

d3js时间轴动态设置的持续时间

1 个答案: