DC.js scatterPlot序数轴刻度位置 [英] DC.js scatterPlot ordinal axis tick position
本文介绍了DC.js scatterPlot序数轴刻度位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用DC.js将值点直接放置在刻度线上方(或将刻度线直接放置在点下方).我无法解决这个问题,尽管X值恰好是刻度值,但DC.js(或D3.js)将值点定位在刻度的左侧.
How can I position the value points directly above the ticks (or the ticks directly under the points), using DC.js. I could not manage that, DC.js (or D3.js) positions the value points shifted to the left of the ticks, although the X-value is exactly the tick value.
重要提示:垂直X轴需要使用此功能(对于线性X轴工作正常)!
Important: I need this feature for ordinal X axis (it works fine for linear X axis)!
var data = [
{"x":"a","y":1},
{"x":"b","y":2},
{"x":"c","y":3}
];
...
dc.scatterPlot("#mychart")
.dimension(dimension)
.group(group)
.x(d3.scale.ordinal().domain(data.map(function(v) {return v.x})))
.xUnits(dc.units.ordinal)
.valueAccessor(function(d) {return d.value;});
完整代码请参见jsfiddle: http://jsfiddle.net/bourbert/59Lmt98w/1/
Complete code see jsfiddle: http://jsfiddle.net/bourbert/59Lmt98w/1/
推荐答案
在dc.js气泡图中修改bubbleLocator:
In dc.js Bubble Chart modify bubbleLocator:
var bubbleLocator = function (d) {
return 'translate(' + (bubbleX(d)+20) + ',' + (bubbleY(d)) + ')';
};
这篇关于DC.js scatterPlot序数轴刻度位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文