Javascript d3瀑布图以x轴值旋转180至-90度

你能解决这个问题吗

我无法在X轴值中旋转。你能检查一下下面的例子吗。现在x轴文本是水平的，但我们需要垂直对齐

在我的要求是旋转-60或-90只。在“模型1，模块2，模块3”中，我需要旋转数值

var margin={top:20，right:30，bottom:30，left:40}，
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部，
填充=0.3；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，填充）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tickFormat（函数（d）{return dollarFormatter（d）；}）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//d3.csv（“data.csv”），类型，功能（错误，数据）{
var data=[{name:“模块1”，值：20}，{name:“模块2”，值：15}，{name:“模块3”，值：45}，
{名称：“最终计数”，值：200}]；
//控制台日志（数据）；
//转换数据（即，查找累积值和总计）以便于绘制图表
var累积=0；
对于（变量i=0；i=0）？“正”：“负”
}
数据推送({
名称：'总计'，
完:累计,，
起点：0，
类别：“总计”
});
x、 域（data.map（函数（d）{返回d.name；}））；
y、 域（[0，d3.max（数据，函数（d）{return d.end；}）]）；
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
变量条=图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”，函数（d）{return“bar”+d.class}）
.attr（“transform”，函数（d）{return”translate（“+x（d.name）+”，0）”；}）；
附加条（“rect”）
.attr（“y”，函数（d）{返回y（Math.max（d.start，d.end））；}）
.attr（“height”，函数（d）{return Math.abs（y（d.start）-y（d.end））；}）
.attr（“宽度”，x.rangeBand（））；
附加条（“文本”）
.attr（“x”，x.rangeBand（）/2）
.attr（“y”，函数（d）{返回y（d.end）+5；}）
.attr（“dy”，函数（d）{return（（d.class=='negative'）？'-'：''）+.75em}）
.text（函数（d）{return dollarFormatter（d.end-d.start）；}）；
过滤器（函数（d）{return d.class！=“total”}）.append（“line”）
.attr（“类”、“连接器”）
.attr（“x1”，x.rangeBand（）+5）
.attr（“y1”，函数（d）{返回y（d.end）}）
.attr（“x2”，x.rangeBand（）/（1-填充）-5）
.attr（“y2”，函数（d）{返回y（d.end）}）
//});
功能类型（d）{
d、 值=+d.值；
返回d；
}
函数dollarFormatter（n）{
n=数学四舍五入（n）；
var结果=n；
如果（数学绝对值（n）>1000）{
结果=数学四舍五入（n/1000）+“K”；
}
返回结果；
}

.bar.total rect{
填充：钢蓝；
}
.bar.正矩形{
填充：暗绿色；
}
.bar.负矩形{
填充：深红色；
}
.条线连接器{
笔画：灰色；
笔划阵列：3；
}
.bar文本{
填充物：白色；
字体：10px无衬线；
文本锚定：中间；
}
.轴文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}

---

仅旋转前3个刻度（“模块1”、“模块2”和“模块3”）：

var ticks = d3.selectAll(".x.axis text").each(function(d, i) {
    if (i < 3) {
        d3.select(this).attr("y", 0)
        d3.select(this).attr("x", 10)
        d3.select(this).attr("dy", ".35em")
        d3.select(this).attr("transform", "rotate(90)")
        d3.select(this).style("text-anchor", "start");
    }
});