Javascript 旋转层次条形图

我使用的是分层D3.JS条形图

这里是链接

我想将此图表旋转为垂直位置

以下代码用于将图表旋转为垂直位置

//svg Rotate
svg.attr("transform", function (d) { 
        return "rotate(-90)"
     }); 

但这个图表正在走向浏览器的顶端

当我添加以下代码时

svg.attr("transform", function (d) { 
        return "rotate(-90deg)"
     }); 

图表将进入浏览器中并显示附件

有人能告诉我如何按照我的要求显示显示器吗

谢谢

---

维诺思，

正如@Terry在评论中所说的，这是一个错误。您在问“如何旋转图表？”；当你应该问“如何将图表重新绘制为垂直？”。好了，这里是全部重构：

正文{
字体：10px无衬线；
}
矩形背景{
填充物：白色；
}
.安讯士{
形状渲染：边缘清晰；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
}
var margin={顶部：10，右侧：120，底部：120，左侧：120}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var-barHeight=20；
var color=d3.scale.ordinal（）
.范围（[“钢蓝”、“#ccc”]）；
var持续时间=750，
延迟=25；
var partition=d3.layout.partition（）
.value（函数（d）{返回d.size；}）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，向上）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.附加（“行”）
.attr（“x1”，“100%”）；
svg.append（“g”）
.attr（“类”、“y轴”）；
d3.json（“https://jsonblob.com/api/f577d19c-0f2b-11e7-a0ba-09040711ce47，函数（错误，根）{
如果（错误）抛出错误；
分区.节点（根）；
y、 域（[0，root.value]）.nice（）；
向下（根，0）；
});
功能下降（d，i）{
如果（！d.children | | | | this.uuu transition_uuu）返回；
var end=持续时间+d.children.length*延迟；
//将当前显示的任何条标记为退出。
var exit=svg。选择全部（“.enter”）
.attr（“类”、“出口”）；
//输入节点会立即隐藏单击的工具栏，因此请将其隐藏。
exit.selectAll（“rect”）.filter（函数（p）{return p==d；}）
.样式（“填充不透明度”，1e-6）；
//为单击的数据输入新栏。
//根据上面的说明，可以立即看到输入条。
var enter=bar（d）
.attr（“转换”，堆栈（i））
.样式（“不透明”，1）；
//使文本淡入，即使条形图可见。
//以家长的身份给条形图上色；如果合适，它们将淡出给孩子们。
输入。选择（“文本”）。样式（“填充不透明度”，1e-6）；
输入。选择（“矩形”）。样式（“填充”，颜色（真））；
//更新x尺度域。
y、 域（[0，d3.max（d.children，函数（d）{返回d.value；}）]）.nice（）；
//更新x轴。
svg.selectAll（“.y.axis”）.transition（）
.持续时间（持续时间）
.呼叫（yAxis）；
//将输入杆转换到其新位置。
var entertransformation=enter.transition（）
.持续时间（持续时间）
.delay（函数（d，i）{返回i*delay；}）
.attr（“transform”，函数（d，i）{return”translate（“+barHeight*i*2.5+”，“+0+”））；}）；
//转换输入文本。
输入转换。选择（“文本”）
.样式（“填充不透明度”，1）；
//将输入矩形转换为新的y比例。
entertransformation.select（“rect”）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.style（“填充”，函数（d）{返回颜色（！！d.children）；}）；
//将退出条转换为淡出。
var exitTransition=exit.transition（）
.持续时间（持续时间）
.样式（“不透明度”，1e-6）
.remove（）；
//将现有条形图过渡到新的y形刻度。
exitTransition。选择All（“rect”）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）；
//将当前节点重新绑定到背景。
svg.select（“.background”）
.基准（d）
.transition（）
.持续时间（结束）；
d、 指数=i；
}
功能启动（d）{
如果（！d.parent | | this.uu transition_uu）返回；
var end=持续时间+d.children.length*延迟；
//将当前显示的任何条标记为退出。
var exit=svg。选择全部（“.enter”）
.attr（“类”、“出口”）；
//为单击的数据的父级输入新栏。
var enter=bar（d.parent）
.attr（“transform”，函数（d，i）{return”translate（“+barHeight*i*2.5+”，“+0+”）；）
.样式（“不透明度”，1e-6）；
//根据需要为条形图上色。
//退出节点将隐藏父栏，因此将其隐藏。
输入。选择（“rect”）
.style（“填充”，函数（d）{返回颜色（！！d.children）；}）
.filter（函数（p）{返回p==d；}）
.样式（“填充不透明度”，1e-6）；
//更新y比例域。
y、 域（[0，d3.max（d.parent.children，函数（d）{返回d.value；}）]）.nice（）；
//更新y轴。
svg.selectAll（“.y.axis”）.transition（）
.持续时间（持续时间）
.呼叫（yAxis）；
//过渡输入条在整个持续时间内淡入。
var entertransformation=enter.transition（）
.期限（完）
.样式（“不透明”，1）；
//将输入矩形转换为新的y比例。
//完成输入父矩形后，使其可见！
entertransformation.select（“rect”）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.each（“end”，function（p）{if（p==d）d3.select（this）.style（“fill opacity”，null）；}）；
//将退出栏转换到父级位置。
var exitTransition=exit.selectAll（“g”）.transition（）
.持续时间（持续时间）
.delay（函数（d，i）{返回i*delay；}）
.attr（“转换”，堆栈（d.index））；
//Tr