는 역 버블 차트

Question

나는 이런 식으로 뭔가를 만드는 데 관심을 d3.js. 보통 사람들이 거품을 그리는 것을 봅니다. 거품을 표현할 공간을 그리는 데 열중합니다. 아마도이 마스크/차트를 공유 구성 요소에 배치 할 것입니다.이 구성 요소는 배경 이미지로만 결합되므로 col-md-8과 같은 부트 스트랩 부분에이 마스크를 포함시킬 수 있습니다.

나는 빼기 마스크와 레이블/포인터 물건을 추가했지만 렌더링은하지 않았습니다.

var data = [{ 
    "label": "My Property Value over 3 yrs.", 
    "value": "148", 
    "direction": "up" 
}] 

http://jsfiddle.net/NYEaX/1525/

그래서 이것에 대한 JSON이 될 수있다

$(document).ready(function() { 

    function maskMaker(el) { 

    var backcolor = $(el).data("color"); 
    var backopacity = $(el).data("opacity"); 

    // Set the main elements for the series chart 
    var svgroot = d3.select($(el)[0]).append("svg"); 
    var mask = svgroot 
     .append("defs") 
     .append("mask") 
     .attr("id", "myMask"); 

    mask.append("rect") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("width", "1200px") 
     .attr("height", 500) 
     .style("fill", "white") 
     .style("opacity", backopacity); 

    mask.append("circle") 
     .attr("cx", 550) 
     .attr("cy", 250) 
     .attr("r", 150); 



    var data = [{ 
     label: "text", 
     x: 222, 
     y: 222 
    }] 

    //__labels 
    var labels = mask.append("g") 
     .attr("class", "labels") 

    //__ enter 
    var labels = labels.selectAll("text") 
     .data(data); 

    labels.enter() 
     .append("text") 
     .attr("text-anchor", "middle") 

    //__ update    
    labels 
     .attr("x", function(d) { 
     return d.x; 
     }) 
     .attr("y", function(d) { 
     return d.y; 
     }) 
     .text(function(d) { 
     return d.label; 
     }) 
     .each(function(d) { 
     var bbox = this.getBBox(); 
     d.sx = d.x - bbox.width/2 - 2; 
     d.ox = d.x + bbox.width/2 + 2; 
     d.sy = d.oy = d.y + 5; 
     }) 
     .transition() 
     .duration(300) 

    labels 
     .transition() 
     .duration(300) 

    //__ exit 
    labels.exit().remove(); 
    //__labels   
    //__labels 


    //__pointers 
    var pointers = mask.append("g") 
     .attr("class", "pointers") 

    pointers.append("defs").append("marker") 
     .attr("id", "circ") 
     .attr("markerWidth", 6) 
     .attr("markerHeight", 6) 
     .attr("refX", 3) 
     .attr("refY", 3) 
     .append("circle") 
     .attr("cx", 3) 
     .attr("cy", 3) 
     .attr("r", 3); 

    var pointers = pointers.selectAll("path.pointer") 
     .data(data); 

    //__ enter 
    pointers.enter() 
     .append("path") 
     .attr("class", "pointer") 
     .style("fill", "none") 
     .style("stroke", "black") 
     .attr("marker-end", "url(#circ)"); 

    //__ update 
    pointers 
     .attr("d", function(d) { 
     if (d.cx > d.ox) { 
      return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; 
     } else { 
      return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; 
     } 
     }) 
     .transition() 
     .duration(300) 

    pointers 
     .transition() 
     .duration(300) 

    //__ exit 
    pointers.exit().remove(); 
    //__pointers  



    var svg = svgroot 
     .attr("class", "series") 
     .attr("width", "1200px") 
     .attr("height", "500px") 
     .append("g") 
     .attr("transform", "translate(0,0)") 

    var rect = svg 
     .append("rect") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("width", "750px") 
     .attr("height", 500) 
     .attr("mask", "url(#myMask)") 
     .style("fill", backcolor); 

    } 

    //var el = $(".mask"); //selector 

    $('[data-role="mask"]').each(function(index) { 
    console.log("test") 
    maskMaker(this); 
    }); 
}); 

---

최신 대답 같은

http://jsfiddle.net/NYEaX/1535/

Answer 1

요 u는 몇 가지 작업을 수행해야합니다 SVG DOM에서

1. 라벨 및 마스크 (또는 그 이전에 사각형 자체)를 가진 직사각형 후 포인터 있습니다. 이것은 그들을 최상으로 만들 것입니다. SVG에는 z- 색인이 없습니다. (나는 보통 값으로 설정 아래의 예에서)
2. 는
4. 설정 포인터 목표 값은 d.cx SVG와 d.cy의 시작 부분에 같은 '인증 된 정의'노드에 마커의 선언을 추가

   enter-update-exit 패턴을 다르게 구현하십시오. 귀하의 예제 코드에서 '__ update'주석은 선택 항목의 기존 요소에 대해서만 실행되지만 첫 번째 실행에서는 비어 있습니다. 추가 된 요소와 이미 존재하는 요소에 작업을 병합하는 방법은 https://bl.ocks.org/mbostock/3808218을 참조하십시오. 여기

   labels.enter() 
       .append("text") 
       .attr("text-anchor", "middle") 
   
   //__ update 
   //labels 
   
       .attr("x", function(d) { 
       return d.x; 
       }) 
       ... 
   

동작하는 예제 : 좌표가 더 동적으로 만들 수있는 더 나은 방법이 있나요 - - http://jsfiddle.net/NYEaX/1529/ http://jsfiddle.net/NYEaX/1528/