D3 时间轴 - 为什么刻度线在默认情况下似乎不可见

D3 time axis - why do tick marks seem to be invisible by default?

本文关键字：情况下 默认 时间 为什么 D3      更新时间：2023-09-26

我正在使用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 在刻度线上设置笔触轻松解决此问题......但是，为什么它们首先是不可见的呢？我用谷歌搜索过，但没有发现任何指示刻度线的默认笔划颜色......

非常感谢任何提示，万维网

根据 SVG 规范，笔画的默认值为 none 。由于 d3 对刻度线使用路径，该路径仅显示描边而不显示填充，因此在您设置它们的样式之前不会显示任何内容。

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

为什么 d3 不能为我们解决这个问题？ D3 的轴构建在 SVG 之上，一般来说，D3 允许您与构建在 (css/html/svg( 之上的标准非常紧密地工作。这使得将介质推向极限成为可能，但也意味着您偶尔会遇到这些问题。

相关文章：