多系列 d3 svg 图表未显示刻度

Question

我无法通过基于 d3 svg 线的系列图显示我的刻度（通常显示在 x 和 y 轴上的轴标记点上的小线）

http://plnkr.co/edit/KvJHXM6bjSeEIsZUsXLk?p=preview

我想我可能在这里错过了一个选项

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(4)
  .tickFormat(function(d) {
    var mmdd = d.getMonth() + '/' + d.getDate();
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    return mmdd + " "+ time;

  })
  .tickSize(1)
  .tickPadding(8);

var yAxis = d3.svg.axis()
  .scale(y)
  .tickSize(1)
  .ticks(6)
  .orient("left")
  .tickPadding(20);

我已尝试更改一些“刻度”参数，但我不明白为什么我的刻度在 x 和 y 轴上都丢失了。

感谢任何帮助或指点。

谢谢

Answer 1

.tickSize(1) 导致你的刻度太隐藏（太小），所以删除它，设置将默认为 6。

如果您需要使轴线 (path) 本身更细（我猜这就是您使用 tickSize 选项的原因），最好使用一些 CSS 来设置样式，例如

.axis path,
.axis line {
    fill: none;
    stroke: #000000;
}

我通常建议在 CSS 中也使用 shape-rendering: crispEdges;，但这实际上会导致轴再次被隐藏，因为您使用了 viewBox，这似乎有点弄乱了这里的显示。

此外，您似乎在每个轴上绘制了两次 - 一次是在 drawChart() 中，一次是在您调用时； drawAxis() 在drawChart 的末尾。我建议删除第一个。