D3JS的阳光与扭曲＆gt; v4

Question

我尝试几天将这个漂亮的阳台D3 V3示例转换为D3 V4的新版本：

，但由于DX和D.DX不再存在于边缘层次结构上，因此我无法使其起作用。这里有什么样的开发人员可以将我指向解决方案？如何更改事物以使该示例在V4及以上工作？

我这么远（我认为X1/X0无法正确计算 +之间无法以某种方式工作）：

    // Recursively reposition the node at position x with scale k.
const reposition = (node:any, x: any, k:any) => {
  node.x0 = x;
  if (node.children && (n = node.children.length)) {
    var i = -1, n;
    while (++i < n) x += reposition(node.children[i], x, k);
  }
  return node.x1 = node.value * k;
}

// Stash the old values for transition.
const stash = (d: any) => {
  d.x00 = d.x0;
  d.dx10 = d.x1;
  return d;
}

// Interpolate the arcs in data space.
const arcTween = (a: any):any => {
  var i = d3.interpolate({x0: a.x00, x1: a.dx10}, a);
  return (t:any):any => {
    var b = i(t);
    a.x00 = b.x0;
    a.dx10 = b.x1;
    return arc(b);
  };
}


const magnify = (node:any) => {
  if (node.parent) {
    var parent = node.parent,
        x = parent.x0,
        k = .8;
    parent.children.forEach((sibling: any) => {
      x += reposition(sibling, x, sibling === node
          ? parent.x1 * k / node.value
          : parent.x1 * (1 - k) / (parent.value - node.value));
    });
  } else {
    reposition(node, 0, node.x1 / node.value);
  }

  //node.parent.children[0].x1 =  node.parent.children[0].x1 +1
  // node.parent.children[1].x0 =  node.parent.children[1].x0 +1
//sunburst.remove();
  sunburst.append("g").selectAll("path").data(annotatedCastedHierarchy)
      .join("path").transition()
      .duration(750)
      .attr("d", d => arc(d)) .attr("fill", d => {
                    if (d.data.fqn == clicked){
                        return "#007dbc"
                    } else {
                        return d.data.col
                    }
            });
}

Answer 1

对于任何有兴趣的人，我完成了与V4合作的工作。这是我的代码：

// Recursively reposition the node at position x with scale k.
const reposition = (node:any, x: any, k:any) => {
  node.x0 = x;
  if (node.children && (n = node.children.length)) {
    var i = -1, n;
    while (++i < n) x += reposition(node.children[i], x, k);
  }
  node.x1 = node.x0 + node.value * k;
  return node.value * k;
}

// Stash the old values for transition.
const stash = (d: any) => {
  d.x00 = d.x0;
  d.dx10 = d.x1;
  return d;
}

// Interpolate the arcs in data space.
const arcTween = (a: any):any => {
  var i = d3.interpolate({x00: a.x0, dx10: a.x1}, a);
  return (t:any):any => {
    var b = i(t);
    a.x00 = b.x0;
    a.dx10 = b.x1;
    return arc(b);
  };
}


const magnify = (node:any) => {
  if (node.parent) {
    var parent = node.parent,
        x = parent.x0,
        k = .8;
    parent.children.forEach((sibling: any) => {
      x += reposition(sibling, x, sibling === node
          ? (parent.x1 - parent.x0) * k / node.value
          : (parent.x1 - parent.x0) * (1 - k) / (parent.value - node.value));
    });
  } else {
    reposition(node, 0, node.x1 / node.value);
  }
  
  sunburst.selectAll("path")
      .transition()
      .duration(750)
      .attrTween("d", arcTween)
}