Question

我创建了一个d3.js页面，它显示了一组带有（x，y）坐标的图形节点，但我在每个外部节点使用d3＆＃39包的布局。

我有生成此页面的功能代码，它看起来像这样：

d3.json("knowledge.json", function(error, graphNodes) {
  if (error) return console.error(error);

  graphNodes.forEach( function (graphNode) {

    var innerNodes = pack.nodes(graphNode);

    svg.selectAll(".node")
        .data(innerNodes, function(d) {return d.id})
      .enter().append("circle")
        .style("fill", function(d) {return color(d.depth);})
        .attr("class", "node")
        .attr("cx",  function(d) {return (d.x + graphNode.xOffset);}) 
        .attr("cy",  function(d) {return (d.y + graphNode.yOffset);})
        .attr("r",   function(d) {return d.r;});
  });
});

这很有效，但它不满意，因为我使用的是JavaScript的.forEach而不是使用嵌套连接的数据驱动方法。这是一个嵌套连接示例：

d3.json("knowledge.json", function(error, data) {
    if (error) return console.error(error);

    var groups = svg.selectAll(".node")
        .data(data)
      .enter().selectAll("circle")
        .data(function (d) { return pack.nodes(d); })
      .enter().append("circle")
        .style("fill", function(e) { return color(e.depth); })
        .attr("class", "node")
        .attr("cx", function(e) {return e.x;})
        .attr("cy", function(e) {return e.y;})
        .attr("r", function(e) {return e.r;});
});

请注意，我在这里使用.data两次，首先在外部图形上，然后在从图形的每个节点生成的包上。但是，这不会考虑外部节点的xOffset和yOffset。如何从第二个联接中获取第一个联接的数据？虽然范围使得以下不可能，但我希望在最后三行中使用与此类似的语法：

        .attr("cx", function(e) {return d.xOffset + e.x;})
        .attr("cy", function(e) {return d.yOffset + e.y;})
        .attr("r", function(e) {return e.r;});

感谢您分享的任何见解！

在d3.js嵌套数据连接中，如何从早期连接中访问数据？

0 个答案: