- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我从 d3.js 拿了一个代码,我正在玩它,但我不完全理解 de json 和 js 连接,我想改变某个文本组的颜色,例如 flare.analytics 组
我从这里获取代码,它包含 json 代码:https://gist.github.com/mbostock/7607999
我将在下面显示 javascript。
提前致谢。
var diameter = 960,
radius = diameter / 2,
innerRadius = radius - 120;
var cluster = d3.cluster()
.size([360, innerRadius]);
var line = d3.radialLine()
.curve(d3.curveBundle.beta(0.85))
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
d3.json("flare.json", function(error, classes) {
if (error) throw error;
var root = packageHierarchy(classes)
.sum(function(d) { return d.size; });
cluster(root);
link = link
.data(packageImports(root.leaves()))
.enter().append("path")
.each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
.attr("class", "link")
.attr("d", line);
node = node
.data(root.leaves())
.enter().append("text")
.attr("class", "node")
.attr("dy", "0.31em")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.text(function(d) { return d.data.key; })
.on("mouseover", mouseovered)
.on("mouseout", mouseouted);
});
function mouseovered(d) {
node
.each(function(n) { n.target = n.source = false; });
link
.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
.classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
.filter(function(l) { return l.target === d || l.source === d; })
.raise();
node
.classed("node--target", function(n) { return n.target; })
.classed("node--source", function(n) { return n.source; });
}
function mouseouted(d) {
link
.classed("link--target", false)
.classed("link--source", false);
node
.classed("node--target", false)
.classed("node--source", false);
}
// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
var map = {};
function find(name, data) {
var node = map[name], i;
if (!node) {
node = map[name] = data || {name: name, children: []};
if (name.length) {
node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
node.parent.children.push(node);
node.key = name.substring(i + 1);
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return d3.hierarchy(map[""]);
}
// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
var map = {},
imports = [];
// Compute a map from name to node.
nodes.forEach(function(d) {
map[d.data.name] = d;
});
// For each import, construct a link from the source to target
node.
nodes.forEach(function(d) {
if (d.data.imports) d.data.imports.forEach(function(i) {
imports.push(map[d.data.name].path(map[i]));
});
});
return imports;
}
最佳答案
如果你想从数据中改变文本的颜色,你需要传递一个函数来分析每个节点的数据并返回你需要的特定颜色。
在追加文本节点的情况下:
node = node
.data(root.leaves())
.enter().append("text")
.attr("class", "node")
// SETING CONDICIONAL FILL FOR TEXT
.style("fill", function(d){
// if name of node has 'flare.analytics' return red, if not '#000000'
if (d.data.name.indexOf('flare.analytics') > -1) return '#ff0000';
return '#000000';
})
.attr("dy", "0.31em")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.text(function(d) { return d.data.key; })
.on("mouseover", mouseovered)
.on("mouseout", mouseouted);
关于javascript - D3.js Hierarchical Edge Bundling,如何更改文本组的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57082658/
我有这样的源数据 Childid | Parent ID ------- | --------- 1 | NULL 2 | 1 3 | 1 4 | 2 5 | 4 6 | 5 7 | 6 我需要一个
我想显示父级选择,以便我可以选择父级以进行布局。 这个问题在 WordPress 论坛中没有得到解答。它可能是一个缺失或即将推出的功能。有人让它工作吗? register_post_type('foo
我有一个包含 3 级分层数据的表,但我的查询对级别的分类不正确。 我的查询: SELECT t1.name AS lev1, t2.name as lev2, t3.name as lev3 FRO
我需要一个文件的 URI(我将其放入资源目录中)。如果我使用 MyClass.class.getClassLoader().getResource(resource) 我明白 java.lang.Il
我刚开始在我的 Java 程序(为 Windows 7 制作)中使用 Jsch 进行 SSH 连接。我遇到了将私钥合并到我的程序中的问题。我使用以下代码: URL keyFileURL = Main.
所以我一直在处理一个有一些严重缺陷的自制 DB 框架,使用的理由是不使用 ORM 将节省执行的查询数量。 如果我从可连接对象层次结构的顶层选择所有可能的记录,那么在使用 ORM(例如 Hibernat
我估计了一个具有许多随机效应的复杂层次模型,但我真的不知道检查收敛性的最佳方法是什么。我有来自几百个人的复杂纵向数据,并为每个人估计了相当多的参数。正因为如此,我可以通过许多跟踪图进行目视检查。或者我
我已经对此进行了研究,并且知道我不是第一个提出问题的人,但我似乎无法理解它。我创建了一个简单的示例,如果有人可以提供缺失的链接,我认为它可以帮助我破解它! 我有一个区域表,其中包含层次结构中的大陆和国
好吧,这应该很容易,但我一直在撕扯我的头发。这是我的 POCO(它与机器零件有关,所以一个零件可以包含在父零件中): public class Part { public int ID { ge
我正在绑定(bind)到 SiteMapDataSource(分层)。 我正在重写 PerformDataBinding 以从数据源中获取数据。 页面加载时一切正常。但是,当我在页面上的任何位置执行回
我想从 ViewModel 中的数据动态创建 Hierarchical ContextMenu。 在 ViewMode 中,我定义了 ContextMenuAction: public class C
我正在评估 Backbone javascript framework用于在 TreeView 小部件中显示分层模型的项目(想想 Windows 文件浏览器)。 我喜欢 Backbone 对世界的看法
考虑一个具有 32 位虚拟地址和 1KB 页面的虚拟内存系统。每个页表条目都需要 32 位。希望将页表大小限制为一页。 需要多少级页表? 两个级别的表有 256 个条目;一个级别的表有 64 个条目。
我编写了一个 Oracle 层次结构查询,它将为我们提供特定员工的高层管理人员。 例如如果我们有示例 Emp 和 Manager 映射,例如: WITH emp_manager_mapping AS
考虑一个具有 32 位虚拟地址和 1KB 页面的虚拟内存系统。每个页表条目都需要 32 位。希望将页表大小限制为一页。 需要多少级页表? 两个级别的表有 256 个条目;一个级别的表有 64 个条目。
我想了解如何构建数据集以通过分层边缘捆绑进行可视化。 这是我的测试数据集 [ {"name":"Flare.Expertise.Informatics","imports":["F
我正在尝试使用 Python 和 xml.etree.ElementTree 处理 XML 文件,但遇到多个“分层”默认 namespace 的问题。我需要做的是更改一些节点的文本字段的内容,然后以相
我正在寻找一种将具有复杂层次结构的数据合并到pandas DataFrame中的方法。这种层次结构是由数据中不同的相互依存关系引起的。例如。有一些参数定义了数据的生成方式,然后有时间相关的可观测值,空
我正在实现类别结构,有些产品会有一级类别,但其他产品可能有两级或更多级别: /posts/cat2/post-sulg /posts/cat-1/sub-1/post-slug /posts/cat-
在关于人类可读 URL 的 now migrated question 中,我允许自己详细说明我的一个小爱好: When I encounter URLs like http://www.exampl
我是一名优秀的程序员,十分优秀!