d3.js инверсной пузырьковая диаграмма

Question

Я заинтересован в создании чего-то вроде этого. Обычно мы видим, как люди рисуют пузырь - я очень хочу рисовать пространство, чтобы представить пузырь. Я бы, возможно, поместил эту маску/диаграмму в общий компонент, который объединен только фоновым изображением, поэтому, возможно, встроить его в часть bootstrap, например col-md-8.

Я добавил маску вычитания - и некоторые вещи с меткой/указателем - но не ее рендеринг.

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

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

поэтому для 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

Yo и нужно сделать несколько вещей:

1. В SVG DOM имеет метку и указатель после прямоугольника с маской (или сам прямоугольником перед ними). Это сделает их максимально возможными. В SVG нет индекса z.
2. Добавить объявление маркера в узел один и тот же «Defs» в начале SVG
3. Установить целевые значения указателя d.cx и d.cy (в примере ниже, я поставил их обычные значения)

4. Внедрите шаблон ввода-обновления-выхода по-разному. В вашем примере код с комментариями «__ 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/