在DC系列图表中设置Y轴范围

5

我正在使用dc.js构建一个系列图表。我无法按照预期设置Y轴的起始和结束。请问有人可以建议如何实现从90开始的Y轴?理想情况下,我想将Y轴起点设置为数据值的最小值,终点设置为数据值的最大值。

代码:

d3.csv("data/compareData.txt", function(data) {

  ndx = crossfilter(data);
  runDimension = ndx.dimension(function(d) {return [+d3.time.format.iso.parse(d.timestamp), +d.meterid]; });
  runGroup = runDimension.group().reduceSum(function(d) { return +d.voltagemagnitude*100; });

  testChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(false)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .elasticY(true)
    .dimension(runDimension)
    .group(runGroup)
    .mouseZoomable(false)
    .seriesAccessor(function(d) {return "PMU: " + d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  testChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
  testChart.margins().left += 40;

  dc.renderAll();

});
2个回答

6
我认为您想要的是这样的内容:

我认为您需要的是这样的内容:

var runMin = +runDimension.bottom(1)[0].voltagemagnitude*100;
var runMax = +runDimension.top(1)[0].voltagemagnitude*100;

然后,您可以为y轴设置域:
.y(d3.scale.linear().domain([runMin, runMax]))

注意,bottomtop返回一个数据行,因此您需要从中提取值,并以与reduceSum相同的方式进行转换。

3

我遇到了类似的问题,解决方法是去掉.yAxisPadding。虽然这并不完全解决你的问题,但希望对其他阅读本篇文章的人有所帮助。


成功了!为了让它显示出来,我不得不设置.yAxisPadding(-1)。但是你的答案至少让我的y轴刻度显示出来了。 - Brian Schermerhorn
@MrWiLofDoom:谢谢! - Pravin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接