javascript - dc.js中修改log 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 提供的灵 active ，每当对具有未知边界的数据或您知道有时会在域外产生结果的数据进行分组时，考虑添加“.clamp(true)”似乎是个好主意(即，在对数缩放的情况下为零)。 .y 行现在显示为:

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

有关此的更多信息，请访问 https://github.com/mbostock/d3/wiki/Quantitative-Scales#log_clamp .