如何使用DC.JS移动X轴位置？
我有：
，
但我希望X轴沿 y = 0 ，
例如。
在蓝色位的顶部或在图表底部的位置上的标签。
编辑：如何创建图表。
我正在使用类似的东西：
var
ndx = crossfilter(data),
dataDimension = ndx.dimension(d => d.period),
ordinals = data.map(d => d.period),
lossGroup = dataDimension.group().reduceSum(d => d.loss),
offsets = lossGroup.all().map(d => -d.value),
chart;
// The data is like {
// period: Date (start of period, e.g. month),
// start: Integer (number at start of period/end of last period)
// loss: Integer (number lost during period)
// gain: Integer (number gained during period)
// }
chart = dc.barChart(chartElement)
.dimension(dataDimension)
// The first group is the loss
.group(lossGroup)
.stack(dataDimension.group().reduceSum(d => d.start), 'carryforward')
.stack(dataDimension.group().reduceSum(d => d.gain), 'gain')
.stackLayout(d3.layout.stack().offset(layers => offsets))
.x(d3.scale.ordinal(ordinals).domain(ordinals))
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderLabel(false)
// The first group is the loss
.title(item => 'Loss: ' + item.value)
.title('carryforward', item => 'Sustained: ' + item.value)
.title('gain', item => 'Gain: ' + item.value)
.renderTitle(true);
dc.renderAll();
I have this:
But I want the x axis to run along y=0, e.g.
And ideally I'd either have the tick labels on top i.e. in the blue bit, or where they were at the bottom of the chart.
EDIT: how the chart is created.
I'm using something like:
var
ndx = crossfilter(data),
dataDimension = ndx.dimension(d => d.period),
ordinals = data.map(d => d.period),
lossGroup = dataDimension.group().reduceSum(d => d.loss),
offsets = lossGroup.all().map(d => -d.value),
chart;
// The data is like {
// period: Date (start of period, e.g. month),
// start: Integer (number at start of period/end of last period)
// loss: Integer (number lost during period)
// gain: Integer (number gained during period)
// }
chart = dc.barChart(chartElement)
.dimension(dataDimension)
// The first group is the loss
.group(lossGroup)
.stack(dataDimension.group().reduceSum(d => d.start), 'carryforward')
.stack(dataDimension.group().reduceSum(d => d.gain), 'gain')
.stackLayout(d3.layout.stack().offset(layers => offsets))
.x(d3.scale.ordinal(ordinals).domain(ordinals))
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderLabel(false)
// The first group is the loss
.title(item => 'Loss: ' + item.value)
.title('carryforward', item => 'Sustained: ' + item.value)
.title('gain', item => 'Gain: ' + item.value)
.renderTitle(true);
dc.renderAll();
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
嗯，我想您正在使用
.stacklayout（）来获取负面堆叠。由于DC.JS没有“看”此设置，因此我认为没有任何内置的东西可以抵消轴。您可能需要使用预处理处理程序将其移动。至于移动tick标签，您可以使用
.title（），例如此示例。然后将tick标签设置为空。我能想到的最好，不是真正的答案，而是评论。 :-)
Hmm, I guess you are using
.stackLayout()to get the negative stacking. Since dc.js doesn't “look inside” this setting, I don't think there is anything built-in to offset the axis. You would probably need to use apretransitionhandler to move it.As for moving the tick labels, you could use
.title()instead, like in this example. And then set the tick label to empty.Best I can think of, not really an answer but more than a comment. :-)