Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/473.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在可缩放的sunburst中获取可见的根节点_Javascript_D3.js - Fatal编程技术网

Javascript 在可缩放的sunburst中获取可见的根节点

Javascript 在可缩放的sunburst中获取可见的根节点,javascript,d3.js,Javascript,D3.js,我制作了一个带有标签的可缩放的太阳暴流可视化,可以查看,也可以查看。单击项目时,最里面的可见节点将其标签转向侧面。我只想为这一个节点修复标签,但我还没有找到一种方法 有没有办法确定当前节点是否是可见节点的根?还有其他想法吗 完全可视化: 单击后放大。我想使“平静”节点文本水平: 虽然不完美,但您使用的代码的此修改版本会在当前选定节点设置动画并使其水平时调整其文本 可变宽度=960, 高度=700, 半径=数学最小宽度,高度/2-10; var formatNumber=d3.格式,d; va

我制作了一个带有标签的可缩放的太阳暴流可视化,可以查看,也可以查看。单击项目时,最里面的可见节点将其标签转向侧面。我只想为这一个节点修复标签,但我还没有找到一种方法

有没有办法确定当前节点是否是可见节点的根?还有其他想法吗

完全可视化:

单击后放大。我想使“平静”节点文本水平:

虽然不完美,但您使用的代码的此修改版本会在当前选定节点设置动画并使其水平时调整其文本

可变宽度=960, 高度=700, 半径=数学最小宽度,高度/2-10; var formatNumber=d3.格式,d; var x=d3.scaleLinear .range[0,2*Math.PI]; 变量y=d3.scaleLinear .范围[0,半径]; var color=d3.scaleOrdinald3.schemeCategory 20; var分区=d3.partition; 函数startAngled{return Math.max0,Math.min2*Math.PI,xd.x0;} 函数endAngled{return Math.max0,Math.min2*Math.PI,xd.x1;} 函数innerRadiud{return Math.max0,yd.y0;} 函数outerradiud{return Math.max0,yd.y1;} var arc=d3.arc .startAngle函数d{return startAngled;} .endAngle函数d{return endAngled;} .innerRadiusfunctiond{return innerRadius;} .outerRadiusfunctiond{return outerradius;} var texttransform=functiond{ var换算=yd.y0; var rotation=computeTextRotationd; 如果旋转>90&&旋转<270{ 旋转=旋转+180; 翻译=-翻译; } 回来 旋转+旋转++ 翻译+翻译+,0 ; } var转换={}; 函数计算器转换百分比{ var now=Date.now-transition.clockNow; 如果!transition.delay | now>transition.delay{ 返回Math.min1,now transition.delay | | 0/transition.duration; } 返回0; } 函数computeTextRotationd{ 如果d.depth==0{ 返回0; } 无功电流=xd.x0+d.x1/2; var角度=电流-Math.PI/2/Math.PI*180; iftransition.node==d{ 角度-=90*计算平移百分比; } 返回角度>90 | |角度<270?角度:180+角度; } var textanchor=functiond{ 如果d.depth==0{ 返回中间; } var rotation=computeTextRotationd; 返回旋转>90和旋转<270?结束:开始; } var textdx=函数d{ 如果d.depth==0{ 返回0; } var rotation=computeTextRotationd; 返回旋转>90和旋转<270?-6:6; } var svg=d3.selectbody.appendsvg .宽度,宽度 .身高,身高 .附录 .attransform,translate+宽度/2+,+高度/2+; 函数calcFontSized{ 常量xFactor=12,yFactor=7.5;//存根 如果d.depth==0{ 返回30px; } //使用内弧长度作为文本高度分隔符 var innerArc=endAngled-startAngled*2*Math.PI*InnerRadiud; var len=d.y1-d.y0*半径; 返回Math.mininnerArc/yFactor,len/d.data.textlen*xFactor+px; } 函数clickd={x0:0,x1:1,y0:0,y1:1}{ 转换={clockNow:Date.now,持续时间:750,节点:d} var trans=svg.transition.duration750; trans.selectAllpath .attrWend,function n{return function{return arcn;};} .tweenscale,函数{ var xd=d3.interpolatex.domain[d.x0,d.x1], yd=d3.y.domain[d.y0,1], yr=d3.Y.范围,[d.y0?20:0,半径]; 返回函数{ x、 域xdt; y、 domainydt.rangeyrt; }; }; trans.selectAlltext .attrTweentransform,functionn{return function{return texttransformn;};} .AttrWentext锚点,函数n{返回函数{return textanchorn;};} .attrtwendx,functionn{return function{return textdxn;};} .styletweementsize,function n{return function{return calcFontSizen;};}; trans.selectAlltext .400 .attertweenCapacity,function n{返回函数{ 如果d==n | | n.included{ 返回1; }否则{ 返回0; } }; }; } d3.文本'https://raw.githubusercontent.com/manooh/NVSee/master/data/feelings_EN.txt,函数错误,原始{ 如果错误抛出错误; //用管道替换两个空间缩进 raw=raw.replacenew RegExp'、'g'、'|'; //读取管道分隔数据 var dsv=d3.dsvFormat'|'; var flatData=dsv.parseraw; var rData=currentNode=treeflatData; rData=d3.hierarchyrData; 变量节点=分区数据 .sumfunctiond{return 1;}//每个叶的大小为1 .sortfunctiona,b{d3.ascendinga.name,b.name}//不工作? .后代; g=svg.selectAllpath .数据节点 .enter.appendg; path=g.appendpath .attrd,arc .stylefill,函数,i{ var c; 如果d.depth==0{ 返回白色; }如果d.depth==1,则为else{ c=colord.children?d:d.parent.data.name; }否则,如果d.depth>1{ c=d3.colord.parent.data.color.darker; } d、 data.color=c; 返回c; } .onclick,单击 .附加标题 .textfunctiond{return d.data.name}; text=g.appendtext .stylefill,函数{ 如果d.depth==0{ 返回CCC; }否则{ 返回FFF; }} .attrclass,svglabel .attrtransform,texttransform .attrtext锚定,textanchor .attrdx,textdx .attrdy,.35em//垂直对齐 .textfunctiond{return d.data.name;} .STYLE字体大小,函数{ //hack.将文本len另存为属性,以便在transiton中访问 d、 data.textlen=this.getComputedTextLength; 返回calcFontSized; }; }; 功能树节点{ var curr,父,根; var-lev=1; nodes.foreachd函数{ 如果!根{ //句柄根第一个节点 货币={ 姓名:d.d1, 儿童:[] }; 根=电流; 父项=当前值; }否则{ 如果d['d'+lev+1]{ //照顾孩子 列夫=列夫+1; 父项=当前值; }如果d['d'+lev-1]{ //处理向上移动的层次结构 lev=lev-1; parent=parent.parent; }否则,如果!d['d'+lev]{ //如果它既不是子对象,也不是向上移动的对象,也不是兄弟对象,则处理异常 抛出未处理的树级别; } 货币={ 姓名:d['d'+lev], 儿童:[] }; curr.parent=父项; parent.children.pushcurr; } }; 返回根; } 斯夫格拉贝尔先生{ 字体系列:无衬线; 指针事件:无; } 身体{ -webkit触摸标注:无;/*iOS Safari*/ -webkit用户选择:无;/*Safari*/ -khtml用户选择:无;/*Konquer或HTML*/ -moz用户选择:无;/*Firefox*/ -ms用户选择:无;/*Internet Explorer/Edge*/ 用户选择:无;/*无前缀版本,当前 由Chrome和Opera支持*/ }
太棒了,谢谢你!您输入的额外转换代码没有任何作用,因为延迟从未设置,所以我只在单击中保存currentNode,稍后再使用它。