Question

我正在尝试复制＆＃34;超级组＆＃34;像我在here中找到的一个例子中的功能。即使我的开始和结束角度根据我的主矩阵是正确的，它们也没有正确对齐。我感觉它是Arc2上的InnerRadius和OuterRadius，但我无法缩小需要改变的范围。我的示例代码可以找到here。您可以看到棕色弧线与索引0的起始角度或索引2的endAngle不对齐。

//define grouping with colors
    var groups = [
    {sIndex: 0, eIndex: 2, title: 'SuperCategory 1', color: '#c69c6d'}

  ];
  var cD = chord(matrix).groups;

   console.log(cD);


  //draw arcs
  for(var i=0;i<groups.length;i++) {
    var __g = groups[i];  
    console.log(cD[__g.sIndex].startAngle);
    var arc1 = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(cD[__g.sIndex].startAngle) 
      .endAngle(cD[__g.eIndex].endAngle) 

    svg.append("path").attr("d", arc1).attr('fill', __g.color).attr('id', 'SuperCategory' + i);

Answer 1

看起来我的原始组（Test1，Test2等）的路径已应用了它们。我必须将相同的平移应用于SuperCategory ptah，然后添加到Inner / Outer半径以将其作为外弧移动。我更新了jsfiddle to reflect the change。

 // Add to Radii to move arc flush against inner arc
      .innerRadius(innerRadius + 20)
      .outerRadius(outerRadius + 20)
      .startAngle(cD[__g.sIndex].startAngle) 
      .endAngle(cD[__g.eIndex].endAngle) 

// add the translation
    svg.append("path").attr("d", arc1).attr('fill', __g.color).attr('id', 'SuperCategory' + i).attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

D3js和弦图多组

1 个答案: