如何将首选项应用于d3.tree节点 [英] How to apply preferences to a d3.tree node

问题描述

我修改了 $ b 的代码https://bl.ocks.org/mbostock/4063550

为分层节点的整齐排列打造一个不错的数字。假设我有一个类似于网页上的flare.csv文件。代码现在根据节点是否在内部圆上（表示节点有两个链接）或在外部圆上分配颜色。

我想要的是为位于名称为flare的中心（父节点）的点指定一种特定的颜色（比方说蓝色）。另外，我想为所有外圈节点（只有一个连接）指定一个特定的颜色（比如说红色），其名称是sub。

所有其他节点只能是黑色。

如何在HTML代码中实现我想要的功能？

解决方案

您可以在设计圈子时检查父母和孩子：

< pre $ node.append（circle）
.style（fill，function（d）{
return！d.parent？blue：d .children？red：black;
}）
.attr（r，2.5）;


以下是您的更新bl.ocks： https://bl.ocks.org/anonymous/696c1201ed63715753e76e480db343f0

编辑：只着色指定节点：

  .style（fill，function（d）{
 return！d.parent？蓝色：d.data.id ===flare.vis.data？red：black; 
}）
  

以下是bl.ocks： https：// bl .ocks.org / anonymous / b55bc1e54414b4bbbfebee93ac6912a4

I have adapted a code from

https://bl.ocks.org/mbostock/4063550

to make a nice figure for the tidy arrangement of layered nodes. Assume I have a similar flare.csv file as on the webpage. The code right now assigns color based on whether a node is on an internal circle (which means the node has two links) or on an outer circle.

What I want instead is to assign a specific color (let's say blue) to the point located in the center (the parent node) whose name is flare. Also I want to assign a specific color(let's say red) to all outer-circle nodes (those have only one connection) which name is "sub".

All other nodes could be only black.

How can I implement what I want in the HTML code?

解决方案

You can check for parents and children when styling the circles:

node.append("circle")
    .style("fill", function(d) {
        return !d.parent ? "blue" : d.children ? "red" : "black";
    })
    .attr("r", 2.5);

Here is your update bl.ocks: https://bl.ocks.org/anonymous/696c1201ed63715753e76e480db343f0

EDIT: colouring only your specified node:

.style("fill", function(d){
    return !d.parent ? "blue" : d.data.id === "flare.vis.data" ? "red" : "black";
})

Here is the bl.ocks: https://bl.ocks.org/anonymous/b55bc1e54414b4bbbfebee93ac6912a4

这篇关于如何将首选项应用于d3.tree节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！