我有一个每天都有数据点的图,但我对x轴的默认设置不满意。
默认的x轴选择要标记的点,例如,使用xAxis.ticks(d3.time.month);
,它将用该月的名称标记每个月的第一个:
|-------|-------|-------|-------|-------|-------|
nov dec jan feb mar apr may
这对于条形图来说很好,因为上面每个月只有一个条形图,但对于面积图来说是误导性的,例如"dec"中的"d"出现在第28、29&11月30日。
我想用它来标记这个月所涵盖的范围(刻度之间的间隔):
|-------|-------|-------|-------|-------|-------|
nov dec jan feb mar apr
有什么简单的方法可以在高层指定这一点吗?
(2019)使用最新的d3v5、其他stackerflow响应、1和mbostock技巧来选择和编辑标签文本属性、轴样式。
首先给出x_scale
和ticks
的数量,可以计算所有刻度(包括非线性刻度)的渲染像素距离。下面的函数返回一个带有刻度距离/空格的数组。
// ticksDistance is constant for a specific x_scale
// apply scale to ticks and calcule distance
const getTicksDistance = (scale) => {
const ticks = scale.ticks(); // return array with ticks
const spaces = []
for(let i=0; i < ticks.length - 1; i++){
spaces.push(scale(ticks[i+1]) - scale(ticks[i]))
}
return spaces;
};
const ticksSpacingTime = getTicksDistance(x_scale_time);
然后使用该距离将标签从其当前位置偏移,索引i
将给出d3在文本标签上迭代的位置。
svg.append("g")
.attr("class", "x-axis-shifted")
.attr("transform", "translate(0,100)")
.call(x_axis)
.selectAll("text")
.attr("x", (d,i) => ticksSpacingTime[i]/2)
const x_scale_time = d3.scaleTime()
.domain([new Date(2017,12,1),new Date()])
.range([0, 960]);
const x_axis_time = d3.axisBottom()
.scale(x_scale_time)
.ticks(d3.timeMonth.every(1))
const x_scale_pow = d3.scalePow().exponent(2)
.domain([0,20000])
.range([0, 960]);
const x_axis_pow = d3.axisBottom()
.scale(x_scale_pow)
.ticks(10)
// ticksDistance is constant for a specific x_scale
const getTicksDistance = (scale) => {
const ticks = scale.ticks();
const spaces = []
for(let i=0; i < ticks.length - 1; i++){
spaces.push(scale(ticks[i+1]) - scale(ticks[i]))
}
return spaces;
};
//you have to recalculate when x_scale or ticks change
const ticksSpacingTime = getTicksDistance(x_scale_time);
const ticksSpacingPow = getTicksDistance(x_scale_pow);
const svg = d3.select("body").append("svg")
.attr("width", "500px")
.attr("height","350px")
.style("width", "100%")
.style("height", "auto");
// normal
svg.append("g")
.attr("class", "x-axis-time")
.attr("transform", "translate(0,0)")
.call(x_axis_time)
// shift labels to half of the ticks distance
svg.append("g")
.attr("class", "x-axis-time-shifted")
.attr("transform", "translate(0,40)")
.call(x_axis_time)
.selectAll("text")
.attr("x", (d,i) => ticksSpacingTime[i]/2)
// normal
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0,110)")
.call(x_axis_pow)
// shift labels to half of the ticks distance
svg.append("g")
.attr("class", "x-axis-shifted")
.attr("transform", "translate(0,150)")
.call(x_axis_pow)
.selectAll("text")
.attr("x", (d,i) => ticksSpacingPow[i]/2)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
要使它们出现在范围的中间,您需要向text
元素添加偏移(dx)。这个偏移量将等于间隔大小的一半,您可以动态计算。
下面是一个做类似事情的例子。
我也遇到了同样的问题,并通过使用另一个偏移15天的X轴标尺来解决。
// scale is your usual x scale. change dates on the domain by 15 days
var d0 = scale.domain()[0];
d0.setDate(d0.getDate() - 15);
var d1 = scale.domain()[1];
d1.setDate(d1.getDate() - 15);
// use this new x scale for the axis only
new_scale = d3.time.scale().domain([d0, d1]).range(scale.range());
d3.svg.axis().scale(new_scale);
这样,你就不会笨拙地转换文本,并且仍然将所有繁重的工作留给d3。为了显示刻度,您可以使用具有法线比例的第二个x轴。