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 spec，笔划的默认值为none。由于d3使用了一个刻度线路径，它只显示一个笔划而没有填充，所以在你设置样式之前不会显示任何内容。

我不确定他们为什么决定这一点;也许是为了使形状边框更简单一点。由于stroke-width默认为1，因此添加边框只需要更改一个属性。如果stroke是除none之外的任何其他值，则stroke-width必须默认为0（默认情况下不想给文本指定笔划！），设置笔画的方式有点直觉第一次：你必须知道在看到任何笔画之前将笔画宽度改为正数。

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

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

1 个答案: