2

我创建了一个弧形可视化，它是一个半圆形，上面有大约 74 个路径元素，每个元素代表一个国家，它是“arcValue”（表示为每条路径的高度）：

http://jsfiddle.net/developerAndADj/2DYrQ/

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

我正在尝试完成两件事：

  1. 显示某些国家/地区有产品数量，而其他国家/地区没有。
  2. 有代表这些产品数量的曲线或弦。

到目前为止，我已经能够在上面的小提琴中使用一个额外的弧线，从半圆的中心到每个路径元素，但是没有弯曲的效果。

我还设法根据每个国家/地区的产品数量创建和弦，但是，我无法让和弦与它对应的国家对齐。这是我生成绳索的代码：

// 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);

这是一个演示：http: //jsfiddle.net/developerAndADj/68WRT/

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

感谢您的任何反馈！

4

0 回答 0