d3.js - DC.js scatterPlot 坐标轴刻度位置

Question

如何使用 DC.js 将值点直接定位在刻度上方(或直接位于点下方的刻度)。我无法做到这一点，DC.js(或 D3.js)将值点定位到刻度的左侧，尽管 X 值正是刻度值。

重要提示:我需要此功能用于 X 轴序数 (它适用于线性 X 轴)!

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/

Answer 1

在 dc.js Bubble Chart 中修改 bubbleLocator:

var bubbleLocator = function (d) {
return 'translate(' + (bubbleX(d)+20) + ',' + (bubbleY(d)) + ')';
};