d3刻度具有不同的宽度

时间:2013-11-11 19:51:50

标签: javascript css d3.js

我正试图让所有的刻度都具有相同的宽度。截至目前,有些是您从下图中看到的两倍宽。具体来说,看看06/07和06/09之间的差异。

chart with different width ticks

我尝试过设置stroke-width: 1shape-rendering: crispEdges(甚至是shape-rendering: auto)。我甚至看过我定义x刻度和x轴的方式:

var x = d3.time.scale()
    .domain([startDate, endDate])
    .rangeRound([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(d3.time.format('%m/%d'))
    .tickSize(-height)
    .tickPadding(1);

这是相关的CSS:

.axis path, .axis line {
    fill: none;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

对于它的价值,效果在刷新时是一致的。也就是说,06/07的刻度总是比06/09更厚。

0 个答案:

没有答案