- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 d3 的新手,对将数据连接到 DOM 元素的概念感到困惑。我在 JSON 中有一个非常重要的数据存储,我很难分离出不同的部分。这是我的 JSON:
var data ={
"groups" :
[{
"name": "group1",
"atts":
[{
"nodes":
[
{"id": "root", "name": "Plaintext Router" },
{ "id": "B", "name": "Ethernet Switch" },
{ "id": "C", "name": "1.10" },
{ "id": "D", "name": "1.1" },
{ "id": "E", "name": "1.2" }
],
"links":
[{ "source": "root", "target": "B" },
{ "source": "root", "target": "C" },
{ "source": "root", "target": "D" },
{ "source": "root", "target": "E" },
]
}]
},
{
"name": "group2",
"atts":
[{
"nodes":
[
{ "id": "root", "name": "Plaintext Router" },
{ "id": "B", "name": "Ethernet Switch" },
{ "id": "C", "name": "1.1" },
{ "id": "D", "name": "1.2" }
],
"links":
[{ "source": "root", "target": "B" },
{ "source": "root", "target": "C" },
{ "source": "root", "target": "D" },
]
}]
}
]
}
因此,我想为两个组创建网络 map 。根节点是一个中心,链接以辐条模式发散到中心周围的其他节点。
我希望能够选择要可视化的组。我不希望它们同时可视化。
我必须尝试执行的代码如下。
var height = 600;
var width = 600;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(300))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.selectAll("line")
.data(data.groups, key)
[[需要获取所选组的链接数组]]
.enter()
.append("line")
.attr("stroke","green");
var groups = svg.selectAll(".node")
.data(data.groups, key)
[[需要获取所选组的节点数组]]
.enter()
.append("g");
var node = groups.append("rect")
.attr("width", function(d) { return d.w * 2; })
.attr("height", function(d) { return d.h * 2; })
.style("fill", function(d) { return "url(#" + d.icon + ")"; });
function key(d) {
return ((d.groups.name === "group1") ? d.groups.atts : null);
}
上面的关键函数表示我要映射'group1'组。我遇到的问题是我不知道如何获得与所选组相关联的“节点”和“链接”的“atts”数组。我希望能够在需要的地方分配节点和链接。
我现在得到的错误是:“无法获取未定义或空引用的属性‘名称’”在“关键”功能中。
我省略了其他指令,例如 svg:patterns 和其他指令,以尽量让事情变得简单。我希望这个例子能传达我的观点。
我很感激你能为此提供的任何帮助。
最佳答案
使用 .filter((d) => {...},您可以过滤数据并设定应设置数据的条件。我希望这就是您的意思...
过滤器示例:
const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
let longWords = words.filter(word => word.length > 6)
JS
var data ={
"groups" :
[{
"name": "group1",
"atts":
[{
"nodes":
[
{"id": "root", "name": "Plaintext Router" },
{ "id": "B", "name": "Ethernet Switch" },
{ "id": "C", "name": "1.10" },
{ "id": "D", "name": "1.1" },
{ "id": "E", "name": "1.2" }
],
"links":
[{ "source": "root", "target": "B" },
{ "source": "root", "target": "C" },
{ "source": "root", "target": "D" },
{ "source": "root", "target": "E" },
]
}]
},
{
"name": "group2",
"atts":
[{
"nodes":
[
{ "id": "root", "name": "Plaintext Router" },
{ "id": "B", "name": "Ethernet Switch" },
{ "id": "C", "name": "1.1" },
{ "id": "D", "name": "1.2" }
],
"links":
[{ "source": "root", "target": "B" },
{ "source": "root", "target": "C" },
{ "source": "root", "target": "D" },
]
}]
}
]
}
var height = 600;
var width = 600;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(300))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.selectAll("line")
.data(data.groups.filter((d)=>{
console.log("link")
console.log(d)
}))
.enter()
.append("line")
.attr("stroke","green");
var groups = svg.selectAll(".node")
.data(data.groups.filter((d)=>{
console.log("group")
console.log(d)
}))
.enter()
.append("g");
var node = groups.append("rect")
.attr("width", function(d) { return d.w * 2; })
.attr("height", function(d) { return d.h * 2; })
.style("fill", function(d) { return "url(#" + d.icon + ")"; });
function key(d) {
return ((d.name === "group1") ? d.atts : null);
}
关于javascript - 对数据绑定(bind)和选择特定数据感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49416243/
我正在尝试学习Rust。我正在阅读一本书online,该书实现了unix程序cat。现在,我试图读取作为像cargo run file1.txt file2.txt这样的参数传递的文件的内容,但是程序
我在 GHC 8.0.1 中遇到了一个带有种类索引 (?) GADT 的奇怪情况,其中在类型与种类签名中引入 foralls 会产生不同的类型检查行为。 考虑以下数据类型: {-# LANGUAGE
我正在使用 Perl 5.10 开发应用程序,HTML::Mason和 Apache 2.2。这是我第一次在大型项目中使用 Perl 5.10。我每隔一段时间就会出现奇怪的行为。应用程序因一个非常奇怪
我正在尝试将文件上传到aws中的rust中,因为我使用的是 rusoto_s3 的s3 rust客户端,当这些部分从单个线程发送时,我设法使分段上传代码正常工作不是我想要的,我想上传大文件,并且希望能
我是一名优秀的程序员,十分优秀!