Question

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

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

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

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

以下是表示问题的图表截图。

使用ordinal

设置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（＆＃39; transform＆＃39;，＆＃34; translate（-20,0）rotate（-90）＆＃34;）;

如果必要，更改20

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

1 个答案: