[英]Custom tick size on axis (d3js)
我在d3.js中创建了一个svg xy-chart。 是否可以根据tickValue创建不同长度的刻度?
我已经创建了自己的tickFormat函数myTickFormat
并在.tickFormat([format])
使用它,并且工作正常,因为[format]应该是一个函数。 但是不可能对.innerTickSize([size])
做同样的.innerTickSize([size])
,它需要一个数字。
例如,如果我希望值70的刻度更长,我想做这样的事情:
var myTickSize = function(d) {
if (d === 70) { return 20;}
return 6;
};
但是当我使用myTickSize
作为.innerTickSize()
参数时:
var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
.scale(yScale).orient("left")
.innerTickSize(myTickSize);
我收到错误:每个tick的属性x2 =“NaN”错误的值无效 。
tickSize
函数只能接受一个数字作为参数,而不是函数,但还有其他解决方案。
最简单的方法? 绘制轴后,选择所有刻度线并根据其数据值调整它们的大小。 请记住,每次重绘轴后你都必须这样做。
例:
https://jsfiddle.net/zUj3E/1/
关键代码:
d3.selectAll("g.y.axis g.tick line")
.attr("x2", function(d){
//d for the tick line is the value
//of that tick
//(a number between 0 and 1, in this case)
if ( (10*d)%2 ) //if it's an even multiple of 10%
return 10;
else
return 4;
});
请注意,最大值和最小值的刻度线也会绘制为与轴线相同的<path>
一部分,因此缩短它们没有太大影响。 如果您不喜欢缺乏控制,请在设置轴时声明“外部”刻度为零长度。 这会关闭路径的角落,但外部刻度线仍然会有与其他刻度线相同的线条:
var axis = d3.svg.axis()
.tickSize(10,0)
示例: https : //jsfiddle.net/zUj3E/2/
如果这不起作用,请谷歌搜索主要/次要刻度模式的示例。 只需确保您正在查看的示例使用d3版本3:在版本2中添加了一些额外的与tick相关的方法,这些方法不再受支持。 看到这个问答。
根据我的要求改变答案。 选择我想要的刻度标记代替刻度和值,添加“隐藏”类。 但这可以用于主题的任何变化。
var gy = humiditySVG.append( "g" )
.attr( "class", "y axis" )
.attr( "transform", "translate(" + 154 + "," + 0 + ")" )
.call( yAxis );
humiditySVG.selectAll( "text" )
.attr( "class", function ( d ) {
if ( $.inArray(d, [0,50,100])==-1 ) {
return "hide";
}
return;
} );
humiditySVG.selectAll( "line" )
.attr( "x2", function ( d ) {
if ( $.inArray(d, [0,50,100])==-1 ) {
return 1;
} else {
return 3;
}
return;
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.