Я пытаюсь реализовать диаграмму визуализации потока, например визуализацию потока Google. Пожалуйста, предложите любой API для этого типа реализации. Любая помощь будет оценена.
EDIT: я использовал диаграммы Sankey для выполнения этого требования. Ниже мой код:
$(document).ready(function() {
var dataArray = [["India \n 40","United States \n 25","Canada \n 20","Hong Kong \n 15"],
["page1 \n 50","page2 \n 30","about_us.htm \n 20"],
["page2 \n 50","contactus.htm \n 15"],
["page1 \n 50"]];
var sankey = new Sankey();
for(var i=0; i< dataArray.length; i++)
sankey.stack(i,dataArray[i]);
sankey.setData([["India \n 40",20,"page1 \n 50"],["United States \n 25",10,"page1 \n 50"],["Canada \n 20",10,"page1 \n 50"],["Hong Kong \n 15",10,"page1 \n 50"],["India \n 40",10,"page2 \n 30"],["United States \n 25",10,"page2 \n 30"],["Canada \n 20",5,"page2 \n 30"],["Hong Kong \n 15",5,"page2 \n 30"],["India \n 40",10,"about_us.htm \n 20"],["United States \n 25",5,"about_us.htm \n 20"],["Canada \n 20",5,"about_us.htm \n 20"],
["page1 \n 50",35,"page2 \n 50"],["page2 \n 30",15,"page2 \n 50"],["page1 \n 50",10,"contactus.htm \n 15"],["page2 \n 30",5,"contactus.htm \n 15"],
["page2 \n 50",40,"page1 \n 50"]
]);
sankey.setBubbles([["page1 \n 50", 5],["page2 \n 30",10],["about_us.htm \n 20",20],["contactus.htm \n 15",15],["page2 \n 50",10]]);
sankey.bubbleColor = "#F37126";
sankey.bubbleLabelColor = "#FFF";
sankey.draw();
});
В приведенном выше примере у меня есть "page1 \n 50" в первом и третьем взаимодействии. Для этого будет создан только один узел в третьем взаимодействии. Как побороть эту проблему. Пожалуйста, помогите мне.
заранее спасибо