Javascript 是否可以使用d3.js将和弦或曲线添加到圆弧可视化中?(不使用chord.groups)

Javascript 是否可以使用d3.js将和弦或曲线添加到圆弧可视化中?(不使用chord.groups),javascript,d3.js,chord-diagram,Javascript,D3.js,Chord Diagram,我创建了一个圆弧可视化,它是一个半圆,上面有大约74个路径元素,每个元素代表一个国家及其“arcValue”(表示为每条路径的高度): 我希望为productCount>0的国家的可视化添加和弦。每个和弦将从其对应的路径元素转到位于弧下方的路径 我正在努力完成两件事: 表明某些国家有产品数量,而其他国家没有 具有代表这些产品数量的曲线或弦 到目前为止,我已经能够在上面的小提琴中使用一个额外的弧,从半圆的中心到每个路径元素,但是弯曲效果并不存在 我还根据每个国家的产品数量创建了和弦,但是,我无法

我创建了一个圆弧可视化,它是一个半圆,上面有大约74个路径元素,每个元素代表一个国家及其“arcValue”(表示为每条路径的高度):

我希望为productCount>0的国家的可视化添加和弦。每个和弦将从其对应的路径元素转到位于弧下方的路径

我正在努力完成两件事:

  • 表明某些国家有产品数量,而其他国家没有
  • 具有代表这些产品数量的曲线或弦
  • 到目前为止,我已经能够在上面的小提琴中使用一个额外的弧,从半圆的中心到每个路径元素,但是弯曲效果并不存在

    我还根据每个国家的产品数量创建了和弦,但是,我无法使和弦与相应的国家对齐。以下是生成跳线的代码:

    // Initialize the square matrix
    var cDataMatrix = [];
    for(var h = 0; h < data.length; h++){
      cDataMatrix[h] = [];
    
      for(var k = 0; k < data.length; k++){
        cDataMatrix[h][k] = 0;
      }
    }
    
    // Fill the matrix with product count values
    data.forEach(function(d){
      for(var a = 0; a < productVals.length; a++){
        if(d.productCount){
          cDataMatrix[d.id][d.id] = d.productCount;
        } 
      }
    });
    
    // Generate the chord layout
    var chord = d3.layout.chord()
      .padding(.1)
      .matrix(cDataMatrix);
    
    var ch = d3.svg.chord()
      .radius(300)
      .startAngle(function(d, i){
        return arcScale(i*(Math.PI/179.2));
      })
      .endAngle(function(d, i){
        var degree = i+0.8;
        return arcScale(degree*(Math.PI/179.2));
      });
    
    // Draw the chords on the arc
    var chords = indArcBody.append("g")
      .attr("class", "chords");
    
    chords.selectAll("path.chord")
      .data(chord.chords)
      .enter().append("svg:path")
      .attr("class", "chord")
      .style("fill", "#000")
      .attr("d", ch);
    
    //初始化方阵
    var CDATA矩阵=[];
    对于(var h=0;h
    下面是它的一个演示:

    是否可以将每个和弦与其各自的路径元素对齐?此外,是否可以使用从每个路径元素的内半径到位于圆弧或SVG中任何指定坐标下的路径的弦或曲线

    谢谢你的反馈