javascript - d3.js 逆气泡图

Question

我有兴趣创建这样的东西。通常我们看到人们画一个气泡——我热衷于画出代表气泡的空间。我也许会将这个掩码/图表放在一个共享组件中——仅通过背景图像连接——所以可能将其嵌入到像 col-md-8 这样的 Bootstrap 部分中。

我添加了减法掩码——以及一些标签/指针的东西——但它没有渲染。

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

您需要做几件事:

1. 在 SVG DOM 中，标签和指针位于带有 mask 的矩形(或它们之前的矩形本身)之后。这将使他们成为最重要的。 SVG 中没有 z-index。
2. 将标记声明添加到 SVG 开头的同一“defs”节点
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/