Javascript d3js-如何向右移动x域值

我正在使用d3.js版本4制作一张图表。 所以我想向右移动条形图的绘图，如下所示。

通常，该条从起始位置渲染，如下所示

请帮忙。。。。！

---

将svg视为HTML元素。在内部，条形图按“d”元素分组。只需添加一个

transform:translateX（50px）

即可将整个条向右移动

例如，只需在文档上添加此css规则，以对齐黑色、蓝色和黄色条：

g.stack {
    transform: translateX(48px);
}

---

在D3V4.x中，没有本机方法来设置频带刻度中第一个刻度之前的绝对填充量

但是，如果您接受一个黑客解决方案，则有几种黑客攻击

其中一个黑客解决方案就是在真正的域之前简单地添加假值

xScale.domain(["foo", "bar", "baz"].concat(stackedData[0].map(function(d) {
    return d.data.day;
})));

。。。并仅显示轴中的真实域：

xAxis.scale(xScale)
    .tickValues(stackedData[0].map(function(d) {
        return d.data.day;
    }));

结果如下：

var self=this；
自计划小时数=80；
自身平均计划小时数=70；
self.averagPlannedItems=7；
self.isStoryPoints=false；
self.availableHours=0；
self.data=[{
“日”：“星期一”，
“平均规划小时数”：70，
“计划时间过长”：80小时，
“doneWork”：0
}, {
“日”：“星期二”，
“平均规划小时数”：70，
“计划时间过长”：80小时，
“doneWork”：30
}, {
“day”：“Wed”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：35
}, {
“天”：“星期四”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：50
}, {
“日”：“周五”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：55
}, {
“日”：“周六”，
“avgPlannedHours”：0，
“超计划小时数”：0，
“doneWork”：0
}, {
“日”：“太阳”，
“avgPlannedHours”：0，
“超计划小时数”：0，
“doneWork”：0
}, {
“日”：“周一”，
“平均规划小时数”：70，
“计划时间过长”：80小时，
“doneWork”：0
}, {
“日”：“星期二”，
“平均规划小时数”：70，
“计划时间过长”：80小时，
“doneWork”：30
}, {
“日”：“Wed1”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：35
}, {
“day”：“Thu1”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：50
}, {
“日”：“周五”，
“平均规划小时数”：70，
“计划时间过长”：90小时，
“doneWork”：55
}, {
“日”：“Sat1”，
“avgPlannedHours”：0，
“超计划小时数”：0，
“doneWork”：0
}, {
“日”：“太阳1号”，
“avgPlannedHours”：0，
“超计划小时数”：0，
“doneWork”：0
}];
self.dataCopy=self.data.slice（）；
self.normalisedData=[]；
归一化数据（）；
函数normalizeData（）{
self.normalisedData=self.data.map（函数（数据，索引）{
如果（自计划小时数>自平均计划小时数）{
data.overplannedhurs=data.overplannedhurs-data.avgplannedhurs；
}否则如果（自计划小时数<自平均计划小时数）{
data.avgplannedhurs=data.avgplannedhurs-data.overplannedhurs；
}
返回数据；
});
}
renderChart（）；
函数renderChart（）{
变量colors1=['#FFD692'，'#A9EEFF']，
avgPlannedHoursLineColor=“#36CFF5”，
plannedHoursLineColor=self.plannedHours>self.averagePlannedHours？#F5A623:“#A8EEFF”，
颜色=d3.标度标准（颜色1），
保证金={
前25名，
右：180，
底数：30，
左：40
},
svg=d3。选择（“图表容器”），
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var g=svg.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//var stackedData=d3.layout.stack（）（self.normalisedData）；
var stack=d3.stack（）；
var stackedData=堆栈（self.normalisedData）；
stackedData[1]=stackedData[1]。映射（函数（stData，索引）{
stData[0]=0；
返回数据；
});
var xAxis=d3.axisBottom（）；
如果（自计划小时数>自平均计划小时数）{
var swappedStack=stackedData[0]；
stackedData[0]=stackedData[1]；
stackedData[1]=交换堆栈；
}
var yAxis=d3.axisLeft（）
var xScale=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.4）
.对齐（0.3）；
xScale.domain（[“foo”、“bar”、“baz”].concat（stackedData[0].map（函数（d））{
返回d.data.day；
})));
var x1Scale=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.6）；
x1Scale.domain（[“foo”、“bar”、“baz”].concat（stackedData[0]）。map（函数（d）{
返回d.data.day；
})));
X轴刻度（X轴刻度）
.tickValues（堆栈数据[0]）。映射（函数（d）{
返回d.data.day；
}));
var yScale=d3.scaleLinear（）
.rangeRound（[高度，0]）；
如果（自计划小时数>自平均计划小时数）{
yScale.domain（[0，
d3.最大值（堆栈数据[0]，
职能（d）{
返回d[0]+d[1]；
})
]).nice（）；
}否则{
yScale.domain（[0，
d3.最大值（stackedData[stackedData.length-1]，
职能（d）{
返回d[0]+d[1]；
})
]).nice（）；
}
yAxis.刻度（yScale）
.蜱（10）；
var layer=g.selectAll（“.stack”）
.数据（stackedData）
.enter（）.append（“g”）
.attr（“类”、“堆栈”）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
图层。选择全部（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回xScale（d.data.day）；
})
.attr（“y”，函数（d）{
返回yScale（d[1]+d[0]）；
})
.attr（“高度”，功能（d）{
返回yScale（d[0]）-yScale（d[1]+d[0]）；
})
.attr（“宽度”，24）；
var workDoneLayer=g.selectAll（“.work done”）
.数据（自我数据复制）
.enter（）.append（“rect”）
.attr（“类”、“完成的工作”）
.attr（“x”，函数（d）{
返回量表（d日）；
})
.attr（“y”，函数（d）{
返回yScale（d.doneWork）；
})
.attr（“宽度”，24）
.attr（“高度”，功能（d）{
返回高度——yScale（d.doneWork）；
});
g、 附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
g、 附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；