Union/Intersectionデータの視覚化 - javascriptの優先

Question

私はWebアプリケーションを構築する過程にあり、非常にトリッキーな視覚的要件を構築することを任されています。

エンティティの視覚的表現を円で表示する方法が必要です。数学101のように、私は視覚的にその組合や交差点を表現する必要もあります。したがって、たとえば、のは、私は、Java、C++、およびperlのような3つのプログラミング言語を表して、私のキャンバス上の3つの円を持っているとしましょうhttp://www.k12math.com/math-concepts/sets/A_and_B_and_C_un_int.png

この画像のように

..

私のキャンバスにどのようなオブジェクト指向言語が存在するか見たい場合は、JavaとC++の円が交差する必要があります。

これを最初からやっているのではなく、Jqueryプラグインのほうが好きです。

また、データエンティティを表す円は、3に限定されるべきではありません.n個の数字または円があります。

私が最初からそれをやることを余儀なくされた場合、それに近づく方法についてのいくつかの提案があります。

また、円はドラッグ可能である必要があります。私がキャンバスからperlを削除したいのであれば、それをごみ箱にドラッグするだけで済むはずです。 質問や説明のためにお気軽にコメントしてください。

最後に、サークルの各セクションをクリック可能にする必要があります。つまり、オブジェクト指向の交差点をクリックすると、オブジェクト指向の言語をフェッチするイベントを発生させる必要があります。

Answer 1

ドラッグする場合は、静的な画像を提供するので、Google Chart APIでは不十分です。代わりに、<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();