Question

所以我有一个页面显示节点之间的路径和json文件，如下所示：

{"nodes":[
    {"name":"Node 1", "Number":"01", "x":"48.23", "y":"638.54", "Status":"starting"},
    {"name":"Node 2", "Number":"02", "x":"129.05", "y":"658.49", "Status":"starting"},
    {"name":"Node 3", "Number":"03", "x":"174", "y":"687.79", "Status":"starting"},
    {"name":"Node 4", "Number":"04", "x":"169.96", "y":"626.92", "Status":"starting"},
    {"name":"Node 5", "Number":"05", "x":"263.65", "y":"631.47", "Status":"starting"}
],
"links":[
    {"source": 1, "target": 2, "value": 2},
    {"source": 1, "target": 3, "value": 8},
    {"source": 1, "target": 4, "value": 5},
    {"source": 2, "target": 3, "value": 4},
    {"source": 2, "target": 4, "value": 9}
]
}

目前我已将其设置为当我点击一个节点时，它会显示到其他节点的所有路径。我想要的是另一种模式，当我点击节点时，它只显示具有最高＆＃34;值的路径＆＃34;相应源值的属性。

我曾尝试在网上查找一些像这样的d3js示例，但是找不到任何东西，也不知道从哪里开始。

atm当我点击节点1时，我正在使用d3.selectAll函数查找源1的所有路径：

d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)")
.transition()
.duration(10)
.style("stroke", "blue")
.style("display", "block")
.style("stroke-opacity", blueActive[d.nodes[0].Number])
;

我的代码基于此示例：http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294

我的代码在jsfiddle上： jsfiddle.net/jgs6d7fv

我只想知道如何使用d3.js搜索我的JSON文件，以根据源和值属性查找特定链接。

Answer 1

我使用的是http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294

传递的相同示例

这将为您提供来自

的所有链接数据列表

d3.max(d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)").data()

要获得玩家的最大传球，你需要找到>的最大传球次数>

var from_max = d3.max(d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)").data(), function (d) {
                return (d.value);
            });

要获得玩家的最大传球，你需要找到最大传球到这样做

//this will calculate the max for to

var to_max = d3.max(d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)").data(), function (d) {
                return (d.value);
            });

现在，您可以使用 display css属性，根据这样做的最大路径显示或隐藏路径：

d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)")
                .transition()
                .duration(10)
                .style("stroke", "orange")
                .style("display", function (d) {
                if (d.value == to_max) {
                    return "block"
                } else {
                    return "none"
                }
            })

工作小提琴我添加了评论here。

D3js json使用2个属性链接搜索

1 个答案: