d3.js逆バブルチャート

Question

私はこのようなものを作ることに興味があります。私たちは通常、人々がバブルを描いているのを見ています。バブルを表現する空間を描きたいと思っています。おそらく、このマスク/チャートを共有コンポーネントに置くことになります。これは、背景イメージのみで結合されています。これをcol-md-8のようなブートストラップ部分に埋め込むことができます。

サブトラクションマスクとラベル/ポインタのものを追加しましたが、レンダリングしません。

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

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

この

$(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

ヨ用のでJSON Uはいくつかのことを実行する必要があります。SVG DOMで

1. は、ラベルとマスク（またはそれらの前に長方形自体）の長方形の後にポインタを持っています。これはそれらを最上位にします。 SVGにはz-indexはありません。
2. （私は通常の値にそれらを設定する以下の例では）セットポインタのターゲットは
3. d.cxとd.cy値
4. SVG
の初めに同じ「DEFS」ノードにマーカーの宣言を追加します。

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/1528/