Javascript 如何使d3日暴从3点开始'；时钟？

我用这个例子画了一张太阳暴流图。我发现大多数的太阳暴流图都是从12点开始的0度。 如何更改代码使其在3点钟开始

我试图更改代码：

x = d3.scale.linear().range([0, 2 * Math.PI]),

到

---

但是这不起作用。

最简单的方法可能是实际旋转包含可视化的SVG组

<svg>
    <g transform="rotate(90)">
    ... // sunburst goes here
    <g>
<svg>

... // sunburst在这里

我建议重写与渲染相关的部分示例

示例中使用的分区布局不处理角度和旋转，它们由示例中的代码派生。有三种旋转需要处理：

• 旋转od圆形段状区域
• 围绕图表中心旋转文本
• 文本围绕其中心旋转

起点 这是最初的cheese wheel，适用于代码片段：

var宽度=840，
高度=宽度，
半径=宽度/2，
x=d3.scale.linear（）.range（[0,2*Math.PI]），
y=d3.scale.pow（）.指数（1.3）.域（[0,1]）.范围（[0,radius]），
填充=5，
持续时间=1000；
var div=d3.选择（“主体”）；
div.select（“img”）.remove（）；
var vis=div.append（“svg”）
.attr（“宽度”，宽度+填充*2）
.attr（“高度”，高度+填充*2）
.附加（“g”）
.attr（“变换”、“平移”（+[radius+padding，radius+padding]+））；
附加部分（“p”）
.attr（“id”、“简介”）
.text（“单击以缩放！”）；
var partition=d3.layout.partition（）
.sort（空）
.价值（功能（d）{
返回5.8-d.深度；
});
var arc=d3.svg.arc（）
.startAngle（功能（d）{
返回Math.max（0，Math.min（2*Math.PI，x（d.x））；
})
.端角（功能（d）{
返回Math.max（0，Math.min（2*Math.PI，x（d.x+d.dx））；
})
.内半径（功能（d）{
返回数学max（0，d.y？y（d.y）：d.y）；
})
.外层（功能（d）{
返回Math.max（0，y（d.y+d.dy））；
});
var json=getData（）；
var nodes=partition.nodes（{children:json}）；
var path=vis.selectAll（“路径”）.数据（节点）；
path.enter（）.append（“路径”）
.attr（“id”，函数（d，i）{
返回“路径-”+i；
})
.attr（“d”，弧）
.attr（“填充规则”、“偶数”）
.样式（“填充”，颜色）
。开启（“点击”，点击）；
var text=vis.selectAll（“text”）.数据（节点）；
var textEnter=text.enter（）.append（“文本”）
.style（“填充不透明度”，1）
.样式（“填充”，功能（d）{
返回亮度（d3.rgb（颜色（d））<125？#eee:“000”；
})
.attr（“文本锚定”，函数（d）{
返回x（d.x+d.dx/2）>Math.PI？“结束”：“开始”；
})
.attr（“dy”，“.2em”）
.attr（“转换”，函数（d）{
var multiline=（d.name | |“”）.split（“”）。长度>1，
角度=x（d.x+d.dx/2）*180/Math.PI-90，
旋转=角度+（多行？-.5:0）；
返回“旋转（“+旋转+”）平移（+（y（d.y）+填充）+”）旋转（+（角度>90？-180:0）+”）；
})
。开启（“点击”，点击）；
textEnter.append（“tspan”）
.attr（“x”，0）
.文本（功能（d）{
返回d.depth？d.name.split（“”[0]：“”）；
});
textEnter.append（“tspan”）
.attr（“x”，0）
.attr（“dy”、“1em”）
.文本（功能（d）{
返回d.depth？d.name.split（“”[1]| |“”：“”）；
});
功能点击（d）{
path.transition（）
.持续时间（持续时间）
.attrTween（“d”，arcTween（d））；
//有点像黑客，因为我们依靠arcTween更新天平。
文本样式（“可见性”，功能（e）{
返回isParentOf（d，e）？null:d3.选择（this）.style（“可见性”）；
})
.transition（）
.持续时间（持续时间）
.attrTween（“文本锚定”，函数（d）{
返回函数（）{
返回x（d.x+d.dx/2）>Math.PI？“结束”：“开始”；
};
})
.attrTween（“转换”，函数（d）{
var multiline=（d.name | |“”）.split（“”）。长度>1；
返回函数（）{
变量角度=x（d.x+d.dx/2）*180/Math.PI-90，
旋转=角度+（多行？-.5:0）；
返回“旋转（“+旋转+”）平移（+（y（d.y）+填充）+”）旋转（+（角度>90？-180:0）+”）；
};
})
.样式（“填充不透明度”，函数（e）{
返回isParentOf（d，e）？1:1e-6；
})
.每个（“结束”，功能（e）{
d3.选择（this）.样式（“可见性”，isParentOf（d，e）？空：“隐藏”）；
});
};
函数isParentOf（p，c）{
如果（p==c）返回true；
如果（p.儿童）{
返回p.children.some（函数（d）{
返回isParentOf（d，c）；
});
}
返回false；
}
功能色（d）{
如果（d.儿童）{
//最多有两个孩子！
var COLORS=d.儿童地图（颜色），
a=d3.hsl（颜色[0]），
b=d3.hsl（颜色[1]）；
//L*a*b*在这里可能更好。。。
返回d3.hsl（（a.h+b.h）/2，a.s*1.2，a.l/1.2）；
}
返回d.color | |“#fff”；
}
//插值比例！
函数arcTween（d）{
var my=maxY（d），
xd=d3.插值（x.domain（），[d.x，d.x+d.dx]），
yd=d3.interpolate（y.domain（），[d.y，my]），
yr=d3.插值（y.范围（），[d.y？20:0，半径]；
返回函数（d）{
返回函数（t）{
x、 结构域（xd（t））；
y、 域（yd（t））。范围（yr（t））；
返回弧（d）；
};
};
}
函数maxY（d）{
返回d.children？Math.max.apply（Math，d.children.map（maxY））：d.y+d.dy；
}
// http://www.w3.org/WAI/ER/WD-AERT/#color-对比度
功能亮度（rgb）{
返回rgb.r*.299+rgb.g*.587+rgb.b*.114；
}
函数getData（rgb）{
返回[{
“名称”：“香味”，
“儿童”：[{
“名称”：“酶”，
“儿童”：[{
“名称”：“华丽”，
“儿童”：[{
“名称”：“花卉”，
“儿童”：[{
“名称”：“咖啡花”，
“颜色”：“f9f0ab”
}, {
“名称”：“茶玫瑰”，
“颜色”：“e8e596”
}]
}, {
“名”：“香”，
“儿童”：[{
“名称”：“小豆蔻香菜”，
“颜色”：“f0e2a3”
}, {
“名称”：“芫荽籽”，
“颜色”：“ede487”
<svg>
    <g transform="rotate(90)">
    ... // sunburst goes here
    <g>
<svg>