javascript - DC.js 条形图 x 轴标签未与条对齐

Question

使用 DC.js 创建具有有序 x 轴的堆积条形图。

使用的版本: DC.js 版本 1.7.5 crossfilter.js 版本 1.3.12 D3.js 版本 3.5.17

问题是图表的 x 轴标签没有与条形对齐。它们实际上向右移动了两个刻度，因此最后两个标签上方没有条形。

编辑以删除 - 也无法选择最右边的栏来过滤数据，例如悬停在栏上不显示选择器以单击和激活交叉过滤器。 - 它只是两个图表边距重叠阻塞光标。

这是指示问题的图表的屏幕截图。

x 轴是序数，使用.xUnits(dc.units.ordinal)设置

我使用了 renderlet 来改变 x 轴标签的方向，使它们是垂直的。如果我删除 renderlet，它不会改变上面的问题。

这是我的图表 div 和 javascript 代码。

<div id="month-chart"></div>

<script type="text/javascript">
    d3.csv("merged_hostname.csv", function(data) {

        var parseDate = d3.time.format("%Y-%m-%d").parse;

        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.sessions = +d.sessions;
            d.ad_requests = +d.ad_requests;
            d.bounceRate = +d.bounceRate;
            d.clicks = +d.clicks;
            d.earnings = +d.earnings;
            d.newUsers = +d.newUsers;
            d.sessionDuration = +d.sessionDuration;
            d.sessionsPerUser = +d.sessionsPerUser;
            d.twitterSessions = +d.twitterSessions;
            d.users = +d.users;
        });

        var ndx  = crossfilter(data);

        var yyyymmDim = ndx.dimension(function(d) { return d["yyyymm"]; });

        var PPCCByYYYYMM = yyyymmDim.group().reduceSum(function(d) {   
            if (d.PPCC === "PPCC") { 
                return +d.sessions; 
            }else{
                return 0;
            }
            });

        var otherByYYYYMM = yyyymmDim.group().reduceSum(function(d) {   
            if (d.PPCC === "Other") { 
                return +d.sessions; 
            }else{
                return 0;
            }
            });

        monthChart = dc.barChart("#month-chart");

        monthChart
            .height(200)
            .width(500)
            .margins({top: 10, right: 10, bottom: 50, left: 40})
            .dimension(yyyymmDim)
            .group(PPCCByYYYYMM)
            .stack(otherByYYYYMM)
            .transitionDuration(500)
            .brushOn(true)
            .elasticY(true)
            .yAxisLabel('sessions')
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .renderlet(function (chart) {
                chart.selectAll("g.x text")
                .attr('dx', '-30')
                .attr('transform', "rotate(-90)");
            });

        dc.renderAll();

    });
</script>

有什么想法会导致这些问题以及如何解决吗？

Answer 1

你可以用这个移动左边的位置:

.attr('转换', "平移(-20,0) 旋转(-90)");

必要时更改 20