Union/Intersection 데이터 시각화 - 자바 스크립트 우선

Question

웹 응용 프로그램을 만드는 과정에 있으며 시각적으로 매우 까다로운 요구 사항을 처리해야합니다.

엔티티의 시각적 표현을 원으로 표시하는 방법이 필요합니다. 수학 101에서와 마찬가지로, 나는 또한 그들의 결합과 교차점을 시각적으로 표현할 필요가 있습니다. 그래서 예를 들어, 내가 자바, C++, 그리고 펄을 추천 프로그래밍 언어를 나타냅니다 내 캔버스에 세 개의 원이 있다고 가정 해 보자 http://www.k12math.com/math-concepts/sets/A_and_B_and_C_un_int.png

이 이미지처럼

....

내 캔버스에 어떤 객체 지향 언어가 있는지 보려면 Java 및 C++ 원이 교차해야합니다.

처음부터 이렇게하는 것이 아니라 일종의 Jquery 플러그인을 선호합니다.

또한 데이터 엔터티를 나타내는 원은 3 개로 제한되어서는 안됩니다. n 개의 숫자 또는 원이있을 수 있습니다.

내가 처음부터 그것을해야한다면, 어떻게 접근해야하는지에 대한 몇 가지 제안을 해주시면 감사하겠습니다.

또한 원을 드래그 할 수 있어야합니다. 캔버스에서 펄을 지우고 싶다면 그냥 쓰레기통으로 끌어다 놓을 수 있어야합니다. 질문 및/또는 설명에 대해 자유롭게 의견을 말하십시오.

마지막으로 하나씩, 서클의 각 섹션을 클릭 할 수 있어야합니다. 즉, 객체 지향 교차점을 클릭하면 객체 지향 언어를 가져 오는 이벤트를 발생시켜야합니다.

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