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/