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);

我尝试过改变一些＆＃34; tick＆＃34;参数，但我不知道为什么我的刻度在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。我建议删除第一个。

没有出现多系列d3 svg图表

1 个答案: