Question

我正在使用D3.js的cluster layout而且我想允许多个父母。

节点如何拥有多个父节点？

以下是我目前的情况：（JSFiddle）

＆＃13;

var json = {
  "name": "cluster",
  "children": [{
    "name": "AgglomerativeCluster"
  }, {
    "name": "CommunityStructure"
  }, {
    "name": "HierarchicalCluster"
  }, {
    "name": "MergeEdge"
  }]
};

var width = 500,
  height = 250;

var cluster = d3.layout.cluster()
  .size([width, height - 160]);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(0, 40)");

var nodes = cluster.nodes(json);

var link = svg.selectAll(".link")
  .data(cluster.links(nodes))
  .enter().append("path")
  .attr("class", "link")
  .attr("d", function(d, i) {
    return "M" + d.source.x + "," + d.source.y + "V" + (d.target.y / 2) + "H" + d.target.x + "V" + d.target.y;
  });

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })

node.append("circle")
  .attr("r", 4.5);

node.append("text")
  .attr("dx", 3)
  .attr("dy", function(d) {
    return d.children ? -10 : 10;
  })
  .attr("text-anchor", function(d) {
    return d.children ? "end" : "start";
  })
  .text(function(d) {
    return d.name;
  });

＆＃13;

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.node {
  font: 10px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

我想知道是否有可能。数据模型目前不允许这种行为恕我直言，但我不知道很多D3，所以也许有办法解决？

如何使用具有多个父项的节点构建树？

0 个答案: