在dc.js中修改对数y轴比例

Question

我正在尝试将y轴数字值格式化为1、10、100、1,000、10,000，并且按期望的方式显示格式化后的值，但我找不到找到仅显示某些刻度线标签的方法。 目标是仅显示10、100、1,000等，而不显示20、30、40、50、60等。

使用dc.js和crossfilter定义尺寸和分组：

var lineChart = dc.lineChart("#dc-line-chart");

    lineChart
            .width(500)
            .height(500)
            .margins({top: 10, right: 50, bottom: 30, left: 40})
            .dimension(yearValue)
            .group(yearValueGroup)
            .brushOn(false)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .y(d3.scale.log().domain([.5, 1000000]))
            .x(d3.scale.linear().domain([2000, 2050]))
            .yAxis().tickFormat(d3.format(",.0f")); 

我看过自定义javascript解决方案的示例，但似乎必须有一个更简单的解决方案。 任何帮助深表感谢。

Answer 1

我能够将http://bl.ocks.org/mbostock/5537697中的示例应用于dc.js图表​​。 更新后的代码如下。

        var lineChart = dc.lineChart("#dc-line-chart");
        lineChart
            .width(550)
            .height(400)
            .margins({top: 10, right: 20, bottom: 30, left: 60})
            .dimension(yearValue)
            .group(yearValueGroup)
            .brushOn(false)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .y(d3.scale.log().domain([.5, 1000000]))
            .x(d3.scale.linear().domain([2000, 2100]))          
            .yAxis().ticks(10, ",.0f").tickSize(5, 0);

编辑：鉴于dc.js提供的灵活性，每当将数据与未知范围或您知道的数据分组有时会在域外产生结果（即零）时，考虑添加“ .clamp（true）”似乎是一个好主意如果是对数缩放）。 .y行现在显示为：

.y(d3.scale.log().clamp(true).domain([.5, 1000000]))

有关此内容的更多信息， 请参见https://github.com/mbostock/d3/wiki/Quantitative-Scales#log_clamp 。