2

我正在使用 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>) 中，但只有当我将它们的“stroke”属性显式设置为非白色时，它们才会变得不可见。

我可以使用 CSS 轻松解决这个问题，在刻度线上设置笔画……但是为什么它们一开始是不可见的呢？我已经用谷歌搜索了，但没有发现任何指示刻度线的默认笔触颜色......

非常感谢任何提示，wwwald

4

1 回答 1

6

根据SVG 规范，stroke 的默认值为none. 由于 d3 使用刻度线的路径，它只显示笔触而没有填充，所以在你设置它们之前什么都不会显示。

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

为什么 d3 不为我们解决这个问题？d3 的轴建立在 SVG 之上，通常 d3 让您可以非常密切地使用它建立在 (css/html/svg) 之上的标准。这使得将媒体推向极限成为可能，但也意味着您偶尔会遇到这些问题。

于 2013-10-11T13:46:22.847 回答