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

使用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

，则不会改变上述问题

这是我的chart 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>

d3.csv（“合并的主机名.csv”），函数（数据）{
var parseDate=d3.time.format（“%Y-%m-%d”）.parse；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 sessions=+d.sessions；
d、 ad_请求=+d.ad_请求；
d、 反弹率=+d.反弹率；
d、 点击次数=+d次点击；
d、 收益=+d.收益；
d、 newUsers=+d.newUsers；
d、 持续时间=+d.持续时间；
d、 sessionsPerUser=+d.sessionsPerUser；
d、 twitterSessions=+d.twitterSessions；
d、 用户=+d用户；
});
var ndx=交叉滤波器（数据）；
var yyyymmDim=ndx.dimension（函数（d）{返回d[“yyyymm”]；}）；
var ppccbyyyyyymm=yyyyymmdim.group（）.reduceSum（函数（d）{
如果（d.PPCC==“PPCC”）{
return+d.sessions；
}否则{
返回0；
}
});
var otherbyyyyyymm=yyyyymmdim.group（）.reduceSum（函数（d）{
如果（d.PPCC==“其他”）{
return+d.sessions；
}否则{
返回0；
}
});
monthChart=dc.条形图（“月图”）；
蒙特哈特
.身高（200）
.宽度（500）
.margins（{顶部：10，右侧：10，底部：50，左侧：40}）
.维度（yyyymmDim）
.group（PPCCByYYYYMM）
.stack（otherByYYYYMM）
.过渡期（500）
布鲁森先生（对）
.弹性（真实）
.yAxisLabel（“会话”）
.x（d3.scale.ordinal（））
.xUnits（dc.units.序数）
.renderlet（函数（图表）{
图表。选择全部（“g.x文本”）
.attr（'dx'，'-30'）
.attr（'transform'，'rotate（-90）'）；
});
dc.renderAll（）；
});

---

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

您可以使用以下命令向左移动位置：

.attr（'transform'，“translate（-20,0）rotate（-90）”）

---

如有必要，更改20

是否确定与渲染器旋转无关？那

dx

本身可能会使标签失去对齐，但没有使用。Renderlet旋转是我找到的唯一解决方案。

.attr（'dx'，'-30'）

只是将标签向下移动，所以不会与图表重叠。但是谢谢，这个规范化的例子给了我更多的东西可以玩，我的问题通过添加

.attr（“y”，0）

很酷，很高兴这个链接有帮助。解决方案@Gordon告诉我重新调整标签到他们的条带，这正是我所需要的。但这将是一个很好的方法“化妆品修复”的位置标签正是如此。