Question

我是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" },
             ]

        }]
    }
]
}

所以，我有两个组要为其创建网络地图。根节点是一个中心，链接以辐条模式发送到中心周围的其他节点。

我希望能够选择要可视化的组。我不希望它们同时可视化。

我必须尝试做的代码如下。

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和其他指令，试图让事情变得简单。我希望这个例子能说明我的观点。

感谢您对此提供的任何帮助。

Answer 1

使用.filter（（d）=＆gt; {...}，您可以过滤数据并创建应设置数据的条件。我希望这就是您的意思......

过滤示例：

JLS

JS

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
let longWords = words.filter(word => word.length > 6)

as touched a bit here

被数据绑定和选择特定数据所困惑

1 个答案: