Визуализация данных соединения/пересечения - предпочтительный JavaScript

Question

Я занимаюсь созданием веб-приложения и им поручено создать довольно сложное визуальное требование.

Мне нужен способ отображения визуальных представлений объектов в кругах. Как и в математике 101, я также должен визуально представлять их объединение и пересечения.

Как это изображение .. http://www.k12math.com/math-concepts/sets/A_and_B_and_C_un_int.png

Так, например, скажем, у меня есть три круга на холсте, которые представляют собой 3-х языках программирования, таких как Java, C++ и Perl.

Если я хочу посмотреть, какие объектно-ориентированные языки существуют в моем холсте, мне нужно, чтобы круги java и C++ пересекались.

Я бы предпочел какой-то JQuery-плагин, а не делать это с нуля.

Кроме того, круги, представляющие объекты данных, не должны быть ограничены 3. Может быть n число или круги.

Если бы я был вынужден сделать это с нуля, некоторые предложения о том, как подойти к нему, будут оценены.

Кроме того, круги следует перетаскивать. Если бы я хотел удалить perl из моего холста, я должен был бы просто перетащить его в корзину. Не стесняйтесь комментировать вопросы и/или разъяснения.

Последнее, что каждая часть кругов должна быть интерактивной. В других словах, если я нажимаю на объектно-ориентированное пересечение, я должен запустить событие, которое выбирает ориентированные на объекты языки.

Answer 1

Если вы хотите перетащить, то API Google Chart недостаточно, так как он предоставляет статическое изображение. Вместо этого вы можете использовать <canvas> в сочетании с его globalCompositeOperation, чтобы установить, что должно произойти, когда они пересекаются ("lighter" добавляет значения): http://jsfiddle.net/eGjak/226/.

Это решение действительно использует jQuery для удобства. Он не показывает языки при нажатии, но этот код может стать началом для того, что вы пытаетесь реализовать.

var ctx = $('#cv').get(0).getContext('2d'); 
var pi2 = Math.PI * 2; 

ctx.globalCompositeOperation = "lighter"; 
ctx.fillStyle = "rgba(255, 0, 0, 0.25)"; // semi-transparent color 

var Circle = function(x, y, r) { 
    this.x = x; 
    this.y = y; 
    this.r = r; 
}; 

var circles = [ 
    new Circle(100, 100, 50), 
    new Circle(200, 200, 75), 
    new Circle(200, 100, 25) 
]; 

function iterate(f) { // convenience function 
    for(var i = 0; i < circles.length; i++) { 
     f.call(circles[i], i, circles[i]); 
    } 
} 

function draw() { 
    ctx.clearRect(0, 0, 400, 400); 

    iterate(function() { 
     ctx.beginPath(); 
     ctx.arc(this.x, this.y, this.r, 0, pi2); 
     ctx.fill(); 
     ctx.stroke(); 
    }); 
} 

var sqrt = Math.sqrt; 
var selected; 

function coords(e) { 
    var o = $('#cv').offset(), 
     x = e.pageX - o.left, 
     y = e.pageY - o.top; 

    return {x: x, y: y}; 
} 

var grab; // to save grab offset from middle of selected circle 

$("#cv").mousedown(function(e) { 
    var c = coords(e); 
    grab = c; 

    iterate(function() { 
     var dx = this.x - c.x, 
      dy = this.y - c.y; 

     if(sqrt(dx * dx + dy * dy) < this.r) { // mouse within this circle 
      selected = this; 
      grab.x -= this.x; 
      grab.y -= this.y; 
     } 
    }); 
}).mousemove(function(e) { 
    var c = coords(e); 

    if(selected) { 
     selected.x = c.x - grab.x; 
     selected.y = c.y - grab.y; 
     draw(); 
    } 
}).mouseup(function() { 
    selected = null; 
}); 

draw();