Question

我正在为图形可视化项目启动JavaScript和D3，但我不知道如何获取所需的数据。我想我只是不了解一些基本的JS元素...

我有一些节点和链接...

var nodes_data = [
{"id": "Node 1"},
{"id": "Node 2"},
{"id": "Node 3"},
{"id": "Node 4"},
{"id": "Node 5"}]

var links_data = [
{"source": "Node 1", "target":"Node 4"},
{"source": "Node 2", "target":"Node 1"},
{"source": "Node 1", "target":"Node 5"},
{"source": "Node 4", "target":"Node 3"},
{"source": "Node 5", "target":"Node 3"}]

，我只是想在选择节点时突出显示一个链接。我的节点是用这种方式设置的...

var linksRef =
svgRef.append("g")
    .attr("class", "links")
.selectAll("line")
.data(links_data).enter()
.append("line");

var nodesRef =
svgRef.append("g")          
    .attr("class", "nodes")
.selectAll("circle")    
.data(nodes_data).enter()
.append("circle")
    .attr("r", nodeRadius)
    .on("mouseover", mouseOver)
    .on("mouseout", mouseOut);

我希望以此方式更改悬停节点的链接颜色...

function mouseOver(d) {
  var nodeId = d.id;
  d3.selectAll("links")
    .filter(function (d) { return d.source === nodeId })
    .style("stroke", "red");
}

我确实尝试用links或.links或link代替.link，但这些只是在黑暗中拍摄。当我将它们输出到控制台时，我总是得到空数组。很明显，我没有发现一些JS或D3东西！

在这种情况下访问和过滤数据的正确方法是什么？

Answer 1

您在这里有几种选择。

d3.selectAll("links")将选择SVG中的所有links元素。显然，这是行不通的，因为SVG规范中没有<links>元素。

因此，一种解决方案是选择行：

d3.selectAll("line")

如果您在SVG中还有其他行，则另一条正在使用选择：

linksRef.selectAll("line")

最后，您可以设置一个课程...

var linksRef = svgRef.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links_data).enter()
    .append("line")
    .attr("class", "link")

...并按该类别进行选择：

d3.selectAll(".link")

D3.js v4如何到达数据？

1 个答案: