Можно ли добавить аккорды или изогнутые линии к визуализации дуги с помощью d3.js? (Без использования chord.groups)

Я создал визуализацию дуги, которая представляет собой полукруг с примерно 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?

Спасибо за любые отзывы!

0 ответов

Другие вопросы по тегам