d3.js Tesselations和图像定位/缩放

Question

//第一部分是创建曲面细分形状。

http://jsfiddle.net/NYEaX/1526/

这段代码创建了一个曲面细分形状 - 和一个圆圈 - 但必须有一个更干净，更好的循环方式，首先放置一组cols和row。

$(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", 350)
      .attr("cy", 250)
      .attr("r", 70);


    function tesselateShape(mask, shape, x, y, size) {
      if (shape == "rect") {
        mask.append("g")
          .attr("transform", "translate(30) rotate(45 50 50)")
          .append("rect")
          .attr("x", x)
          .attr("y", y)
          .attr("width", size)
          .attr("height", size);
      }

    }

    var size = 200;
    var xStart = 500;
    var yStart = -500;

    var shapes = ["rect", "rect", "rect", "rect", "rect", "rect"];

    var batch = 3; //group in 3 and then move into a new col.
    var batchCount = 1;
    for (i = 0; i < shapes.length; i++) {
      tesselateShape(mask, "rect", xStart, yStart, size);
      yStart += size;
      xStart += size;

      if (i % batch) {

        var xStart = 500 + (-size * batchCount);
        var yStart = -500 + (size * batchCount);

        batchCount++;
      }
    }

    /*
        //col1
         tesselateShape(mask, "rect", 400, -600, 200); 
         tesselateShape(mask, "rect", 600, -400, 200);
         tesselateShape(mask, "rect", 800, -200, 200);

        //col2
         tesselateShape(mask, "rect", 600, -800, 200); 
         tesselateShape(mask, "rect", 800, -600, 200); 
         tesselateShape(mask, "rect", 1000, -400, 200);
            */


    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", "1200px")
      .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);
  });
});

//第二部分是添加圆角蒙版图像和标签，指针

涉及def模式部分 http://jsfiddle.net/NYEaX/652/

[{
    "label": "Google Street View",
    "link": "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76"
}]

json blob like

 var defs = patternsSvg.append('svg:defs');
            defs.append('svg:pattern')
                    .attr('id', index+"-"+value.userName.toLowerCase())
                    .attr('width', 65)
                    .attr('height', 65)
                .append('svg:image')
                    .attr('xlink:href', value.userImage)
                    .attr('x', 0)
                    .attr('y', 0)
                    .attr('width', 65)
                    .attr('height', 65);      

标签和指针

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