d3.js强制饼图节点

Question

我有兴趣制作这种力 - 饼图混合体。我尝试将这两个图表合并在一起 - 为饼图模块创建占位符以使其暴露。

//饼图 http://jsfiddle.net/Qh9X5/10111/

//强制图表 http://jsfiddle.net/Qh9X5/10110/

//合并图表企图1 http://jsfiddle.net/Qh9X5/10114/

//合并图表尝试2 - 最新 http://jsfiddle.net/k0pn3x5o/3/

  var datajson = {
    "name": "parentnode",
    "children": [{
      "name": "A",
      "children": [{
        "name": "Cherry",
        "size": 3938
      }, {
        "name": "Apple",
        "size": 3812
      }, {
        "name": "Banana",
        "size": 6714
      }]
    }, {
      "name": "B",
      "children": [{
        "name": "Strawberry",
        "size": 3938
      }, {
        "name": "Apricot",
        "size": 3812
      }]
    }]
  };

Answer 1

您只需使用正确的节点元素并正确更新它们。

为节点使用g，然后将任何内容放入其中。

 node.enter().append("g")
    .attr("class", "node")
    .attr('transform', d => ("translate(" + d.x + "," + d.y + ")"))
    //Insert pie chart here.

在tick功能中，您只需更新外部g位置即可正确布局。

node.attr('transform', d => ("translate(" + d.x + "," + d.y + ")"));

http://jsfiddle.net/k0pn3x5o/