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提供的灵活性，考虑添加＆＃34; .clamp（true）＆＃34;似乎是一个好主意。每当对具有未知边界的数据进行分组或您知道的数据有时会产生域外的结果（即，在日志缩放的情况下为零）。 .y行现在写着：

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

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

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

1 个答案: