在 dc.js 中修改日志 y 轴刻度答案

【问题标题】：Modify log y-axis scale in dc.js在 dc.js 中修改日志 y 轴刻度
【发布时间】：2015-09-23 03:53:46
【问题描述】：

我正在尝试将 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 解决方案的示例，但似乎必须有一个更简单的解决方案。任何帮助深表感谢。

【问题讨论】：

如果你知道你想要的确切刻度，你应该可以使用d3.axis.tickValues。
成功了，谢谢！它将网格线限制为指定的值，但它已经足够接近我们此时需要的值了。

标签： javascript d3.js dc.js crossfilter

【解决方案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]))

【讨论】：