D3时间轴 - 为什么刻度线似乎默认不可见？

Question

我正在使用X时间轴处理一个非常规则的图形.轴代码非常标准:

var xScale = d3.time.scale()
                .domain([tlState.startdate.getTime(), tlState.enddate.getTime()])
                .range([0, width]);
            var xHourAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(d3.time.hours, 6)
                .tickFormat(d3.time.format("%_Hh"))
                .tickSize(5,1)
                .orient('bottom');
            root.append('g')
                .attr('class', 'axis')
                .attr("transform", "translate(" + 0 + "," + height + ")")
                .call(xHourAxis);

这些tsState.*函数只返回轴的开始/结束日期.我的问题:轴刻度标签是可见的,但我看不到刻度线.它们显然位于DOM树(<line y2="5" x2="0"></line>)中,但是当我将其"笔画"属性明确设置为非白色时,它们才会变得不可见.

我可以使用CSS轻松解决这个问题,以便在标记上设置笔划......但为什么它们首先不可见？我已经google了一下,但没有找到任何表示刻度线的默认笔触颜色......

非常感谢任何提示,wwwald

Answer 1

根据SVG规范,笔划的默认值是none.由于d3使用了一个刻度线路径,它只显示一个笔划而没有填充,因此在您设置样式之前不会显示任何内容.

我不确定他们为什么决定这个; 也许是为了使形状边框更简单一点.由于stroke-width默认为1,因此添加边框只需要更改一个属性.如果笔划是除了之外的任何其他值none,笔画宽度必须默认为0(默认情况下不希望文本为笔画!),并且第一次设置笔画会有点直觉:在看到任何笔画之前,必须知道将笔画宽度改为正数.

为什么d3没有为我们解决这个问题？d3的轴是建立在SVG之上的,一般而言,d3可以让你与(css/html/svg)之上构建的标准密切配合.这样就可以将介质推向极限,但也意味着偶尔会遇到这些问题.