在sunburst ,如何让代码在生成所有弧之后选择根弧?
例如,在代码中:
var first_arc = ""
.json("../data/flare.json", function(json) {
var path = vis.data([json]).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("t_name", function(d) {return d.name})
.style("fill-rule", "evenodd")
.on("click", function(d)...
它会在点击中间圆弧时作为“d”传递给“函数”。
(它的数据在json文件中最先)
更新 1:像这样更改代码......
.style("fill-rule", function(d) {
if (first_arc == "") first_arc = d; return "evenodd"})
...解决了问题,它返回object
:
name: "flare"
children: Array[10]
...
但是这个解决方案看起来不对也不通用。
更新 2:我尝试了几种选择,例如:
first_arc = d3.select("[name='flare']")
它通常返回数组
:
0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]
或“未定义”
更新 3:
first_arc = d3.select("[t_name='flare']")
返回大小为 1 的 array
及其 child :
0: SVGPathElement
__data__: Object
,其中 __data__
是我要查找的对象,但我无法选择它。
最佳答案
根节点是“深度”属性设置为 0 的节点。所以你可以说:
d3.selectAll("path").filter(function(d) { return d.depth === 0; })
您上面的尝试没有奏效,因为 D3 uses CSS3 to select elements .所以你只能将 d3.select 和 d3.selectAll 与 CSS3 一起使用选择器,即您无法通过这种方式访问绑定(bind)到每个元素的数据。过滤绑定(bind)数据的方法是使用selection.filter .
D3 selections字面上是一组元素,请参阅“对选择进行操作”部分。
最后,您可以使用 selection.datum() 获取元素的绑定(bind) __data__
属性.
关于javascript - 选择圆弧/元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11688615/