JavaScript-D3强制布局突出显示子树
我的数据由d3 force布局表示。一些节点折叠，而另一些节点不折叠。我要突出显示的子节点。这是我的包含JavaScript和html的文件 力有向图 圆节点{ 光标：指针； 行程：3182bd； 笔划宽度：1.5px； } line.link{ 填充：无； 行程：9ecae1； 笔划宽度：1.5px； } var w=1060， h=800， 节点， 链接 根 T 风险价值水平=1； var-force=d3.layout.force .ontick，滴答 .尺寸[w，h]； var vis=d3.selectchart.appendsvg:svg .宽度，w .高度，h； 根={ 名称：flare， 儿童：[ { 名称：分析， 儿童：[ { 名称：集群， 儿童：[ {名称：凝聚群集，大小：3938}， {名称：CommunityStructure，大小：3812}， {名称：HierarchycalCluster，大小：6714}， {名称：mergedge，大小：743} ] }, { 名称：graph， 儿童：[ {name:betweennscentrality，size:3534}， {名称：LinkDistance，大小：5731}， {名称：MaxFlowMinCut，大小：7840}， {名称：最短路径，大小：5914}， {名称：SpanningTree，大小：3416} ] }, { 名称：优化， 儿童：[ {名称：AspectRatioBanker，大小：7074} ] } ] }, { 名称：动画， 儿童：[ {名称：1，大小：17010}， {名称：FunctionSequence，大小：5842}， { 名称：内插， 儿童：[ {名称：ArrayInterpolator，大小：1983}， {名称：ColorInterpolator，大小：2047}， {名称：DateInterpolator，大小：1375}， {名称：插值器，大小：8746}， {名称：MatrixInterpolator，大小：2202}， {名称：NumberInterpolator，大小：1382}， {名称：ObjectInterpolator，大小：1629}， {名称：PointInterpolator，大小：1675}， {名称：矩形插值器，大小：2042} ] }, {name:ISchedulable，size:1041}， {name:Parallel，size:5176}， {名称：暂停，大小：449}， {名称：调度程序，大小：5593}， {name:Sequence，size:5534}， {name:Transition，size:9201}， {名称：Transitioner，大小：19975}， {名称：TransitionEvent，大小：1116}， {名称：吐温，尺寸：6006} ] }, { 名称:数据,， 儿童：[ { 名称：转换器， 儿童：[ {名称：转换器，大小：721}， {名称：DelimitedTextConverter，大小：4294}， {名称：GraphMLConverter，大小：9800}， {名称：IDataConverter，大小：1314}， {名称：JSONConverter，大小：2220} ] }, {name:DataField，大小：1759}， {名称：DataSchema，大小：2165}， {名称：数据集，大小：586}， {名称：数据源，大小：3331}， {名称：DataTable，大小：772}， {名称：DataUtil，大小：3322} ] }, { 名称：显示器， 儿童：[ {名称：DirtySprite，大小：8833}， {名称：LineSprite，大小：1732}， {名称：RectSprite，大小：3623}， {名称：TextSprite，大小：10066} ] }, { 名称：flex， 儿童：[ {名称：FlareVis，大小：4116} ] }, { 名称：物理学， 儿童：[ {名称：牵引力，大小：1082}， {名称：重力力，大小：1336}， {名称：IForce，大小：319}， {名称：NBodyForce，大小：10498}， {名称：粒子，大小：2822}， {名称：模拟，大小：9983}， {名称：Spring，大小：2213}， {名称：SpringForce，尺寸：1681} ] }, { 名称：查询， 儿童：[ {名称：AggregateExpression，大小：1616}， {名称：和，大小：102 7}, {名称：算术，大小：3891}， {name:Average，size:891}， {name:BinaryExpression，大小：2893}， {名称：比较，大小：5103}， {名称：CompositeExpression，大小：3677}， {name:Count，size:781}， {名称：DateUtil，大小：4141}， {name:Distinct，size:933}， {name:Expression，size:5130}， {名称：ExpressionIterator，大小：3617}， {名称：Fn，大小：3240}， {name:If，size:2732}， {名称：IsA，大小：2039}， {name:Literal，size:1214}， {名称：匹配，大小：3748}， {名称：最大，大小：843}， { 名称：方法， 儿童：[ {名称：add，大小：593}， {名称：和，大小：330}， {name:average，size:287}， {name:count，size:277}， {name:distinct，size:292}， {名称：div，大小：595}， {名称：eq，大小：594}， {名称：fn，大小：460}， {名称：gt，大小：603}， {名称：gte，大小：625}， {名称：iff，大小：748}， {名称：isa，大小：461}， {名称：lt，大小：597}， {名称：lte，大小：619}， {名称：max，大小：283}， {名称：min，大小：283}， {名称：mod，大小：591}， {名称：mul，大小：603}， {名称：neq，大小：599}， {名称：不，大小：386}， {名称：或，大小：323}， {名称：orderby，大小：307}， {名称：范围，大小：772}， {name:select，size:296}， {名称：stddev，大小：363}， {名称：sub，大小：600}， {name:sum，size:280}， {名称：更新，大小：307}， {名称：方差，大小：335}， {name:where，size:299}， {名称：xor，大小：354}， {名称：\尺寸：264} ] }, {名称：最小，大小：843}， {名称：不，大小：1554}， {名称：或，大小：970}， {name:Query，size:13896}， {名称：范围，大小：1594}， {名称：StringUtil，大小：4130}， {name:Sum，size:791}， {name:Variable，size:1124}， {名称：方差，大小：1876}， {名称：Xor，大小：1101} ] }, { 名称：比例尺， 儿童：[ {名称：IScaleMap，大小：2105}， {名称：LinearScale，大小：1316}， {名称：对数刻度，大小：3151}， {名称：序数刻度，大小：3770}， {名称：QuantileScale，大小：2435}， {名称：QuantitativeScale，大小：4839}， {名称：RootScale，大小：1756}， {名称：比例，大小：4268}， {名称：ScaleType，大小：1821}， {名称：时间刻度，大小：5833} ] }, { 名称：util， 儿童：[ {名称：数组，大小：8258}， {名称：颜色，大小：10001}， {名称：日期，大小：8217}， {名称：显示器，尺寸：12555}， {名称：筛选器，大小：2324}， {名称：几何体，大小：10993}， { 名称：堆， 儿童：[ {名称：FibonacciHeap，大小：9354}， {名称：HeapNode，大小：1233} ] }, {名称：335}， {名称：IPredicate，大小：383}， {名称：IValueProxy，大小：874}， { 姓名：数学， 儿童：[ {名称：DenseMatrix，大小：3165}， {名称：IMatrix，大小：2815}， {名称：SparseMatrix，大小：3366} ] }, {名称：数学，尺码：17705}， {名称：方向，大小：1486}， { 名称：调色板， 儿童：[ {名称：调色板，大小：6367}， {名称：调色板，大小：1229}， {名称：ShapePalette，大小：2059}， {名称：SizePalette，大小：2291} ] }, {name:Property，size:5559}， {名称：形状，大小：19118}， {name:Sort，size:6887}， {name:Stats，size:6557}， {名称：字符串，大小：22026} ] }, { 姓名:vis， 儿童：[ { 名称：安讯士， 儿童：[ {名称：轴，大小：1302}， {名称：Axis，大小：24593}， {名称：AxisGridLine，大小：652}， {名称：AxisLabel，大小：636}， {名称：CartesianAxes，大小：6703} ] }, { 名称：控件， 儿童：[ {名称：AnchorControl，大小：2138}， {名称：ClickControl，大小：3824}， {名称：控件，大小：1353}， {名称：ControlList，大小：4665}， {名称：DragControl，大小：2649}， {名称：ExpandControl，大小：2832}， {名称：HoverControl，大小：4896}， {名称：IControl，大小：763}， {名称：PanZoomControl，大小：5222}， {名称：SelectionControl，大小：7862}， {名称：ToolTiControl，大小：8435} ] }, { 名称:数据,， 儿童：[ {名称：数据，大小：20544}， {名称：DataList，大小：19788}， {名称：DataSprite，大小：10349}， {名称：EdgeSprite，大小：3301}， {名称：NodeSprite，大小：19382}， { 名称：render， 儿童：[ {名称：ArrowType，大小：698}， {名称：Edgerender，大小：5569}， {名称：iRender，大小：353}， {名称：ShaperEnder，大小：2247} ] }, {名称：ScaleBinding，大小：11275}， {名称：树，大小：7147}， {名称：TreeBuilder，大小：9930} ] }, { 名称：活动， 儿童：[ {名称：DataEvent，大小：2313}， {名称：SelectionEvent，大小：1880}， {名称：TooltipEvent，大小：1701}， {名称：VisualizationEvent，大小：1117} ] }, { 名称：传奇， 儿童：[ {名称：图例，大小：20859}， {名称：LegendItem，大小：4614}， {名称：LegendRange，大小：10530} ] }, { 姓名:接线员,， 儿童：[ { 名称:扭曲,， 儿童：[ {名称：双焦点存储，大小：4461}， {名称：变形，大小：6314}， {名称：fisheye，大小：3444} ] }, { 名称：编码器， 儿童：[ {名称：ColorEncoder，大小：3179}， {名称：编码器，大小：4060}， {名称：PropertyEncoder，大小：4138}， {名称：ShapeEncoder，大小：1690}， {名称：SizenCoder，大小：1830} ] }, { 名称：过滤器， 儿童：[ {名称：FisheyeTreeFilter，大小：5219}， {名称：GraphDistanceFilter，大小：3165}， {名称：VisibilityFilter，大小：3509} ] }, {名称：IOperator，大小：1286}， { 名称：标签， 儿童：[ {名称：贴标机，尺寸：9956}， {名称：RadialLabeler，尺寸：3899}， {名称：StackedRealAbeler，大小：3202} ] }, { 名称：布局， 儿童：[ {名称：AxisLayout，大小：6725}， {名称：BundledEdgeRouter，大小：3727}， {名称：CircleLayout，大小：9317}， {名称：CirclePackingLayout，大小：12003}， {名称：树状图布局，大小：4853}， {名称：ForceDirectedLayout，大小：8411}， {名称：IcicleTreeLayout，大小：4864}， {名称：IndentedTreeLayout，大小：3174}， {名称：布局，大小：7881}， {名称：NodeLinkTreeLayout，大小：12870}， {名称：PieLayout，大小：2728}， {名称：RadialTreeLayout，大小：12348}， {名称：RandomLayout，大小：870}， {名称：StackedRealAyout，大小：9121}， {名称：TreeMapLayout，大小：9191} ] }, {名称：运算符，大小：2490}， {名称：OperatorList，大小：5248}， {名称：运算符顺序，大小：4190}， {名称：OperatorSwitch，大小：2581}， {名称：SortOperator，大小：2023} ] }, {名称：可视化，大小：16540} ] } ] }; 函数parseLevelnode，级别{ node.level=级别； 如果类型为node.children！=“未定义”{ node.children.forEachfunctionchildren{ parseLevelchildren，级别+1； }; } } parseLevelroot，0； //console.logJSON.stringifyroot，null，2； 使现代化 函数toggleAlld{ 如果你有孩子{ d、 孩子们。foreachtogleall； 如果d.level<折叠\ U level{ 回来 } 切换； } } //初始化显示以显示几个节点。 根、子、叶； updateroot； // }; 功能更新{ 变量节点=根， links=d3.layout.tree.linksnodes； //重新启动强制布局。 武力 .Nodes节点 .linkslinks 1.charge-1000 .linkDistance100 .摩擦力0.5 开始 //更新链接… link=vis.selectAllline.link .datalinks，函数d{return d.target.id；}； //输入任何新链接。 link.enter.insertsvg:line、.node .attr类，链接 .attrx1，函数d{return d.source.x；} .attry1，函数d{return d.source.y；} .attrx2，函数d{return d.target.x；} .attry2，函数d{return d.target.y；}； //退出所有旧链接。 link.exit.remove； //更新节点… node=vis.selectAllcircle.node .datanodes，函数d{return d.id；} .样式填充、颜色； //输入任何新节点。 node.enter.appendsvg:circle .attr类、节点 .attrcx，函数d{return d.x；} .attracy，函数d{return d.y；} attrr先生，15岁 .样式、填充、颜色 .onclick，鼠标悬停 .callforce.drag； //退出所有旧节点。 node.exit.remove； t=vis.selectAll.t-node .datanodes，函数d{return d.id；} .样式填充、颜色； //输入任何新节点。 t、 enter.appendsvg:text .attrclass，t节点 .attrdx，25px .attry，0 .textfunctiond{返回d.name++d.level？d.level:}； //.callforce.drag； //退出所有旧节点。 t、 退出。移除； } 功能记号{ link.attrx1，函数d{return d.source.x；} .attry1，函数d{return d.source.y；} .attrx2，函数d{return d.target.x；} .attry2，函数d{return d.target.y；}； node.attrcx，函数d{return d.x；} .attracy，函数d{return d.y；}； t、 attrx，函数d{return d.x；} .attry，函数d{return d.y；}； } //叶节点颜色为橙色，包装为白色或蓝色。 函数着色{ 返回d._children？3182bd:d.children？c6dbef:fd8d3c； } //在单击时切换子项。 功能鼠标器{ 如果你有孩子{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } 使现代化 } //返回根目录下所有节点的列表。 函数根{ var节点=[]，i=0； 函数递归节点{ 如果node.children node.children.forEachrecurse； 如果！node.id node.id=++i； nodes.pushnode； } recurseroot； 返回节点； } 功能切换{ 如果你有孩子{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } }JavaScript-D3强制布局突出显示子树,javascript,html,d3.js,Javascript,Html,D3.js,我的数据由d3 force布局表示。一些节点折叠，而另一些节点不折叠。我要突出显示的子节点。这是我的包含JavaScript和html的文件 力有向图 圆节点{ 光标：指针； 行程：3182bd； 笔划宽度：1.5px； } line.link{ 填充：无； 行程：9ecae1； 笔划宽度：1.5px； } var w=1060， h=800， 节点， 链接 根 T 风险价值水平=1； var-force=d3.layout.force .ontick，滴答 .尺寸[w，h]； var vis
我将使用一点递归来预处理数据，并添加一个关于它是否是查询的子级的属性：
function isChildofQuery(children, value){
children.forEach(function(d){
d['isQChild'] = value;
if (d.name === "query"){
isChildofQuery(d.children, true);
} else if (d.children){
isChildofQuery(d.children, false);
}
})
}
isChildofQuery(root.children, false);
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
.style("stroke", function(d){
return d.target.isQChild ? "red" : "#9ecae1;";
});