d3.js透明形状的细分 - 复杂的减法

Question

扩展第一个例子。我有兴趣扩展解决方案。

1 - 让这个更具响应性 - 扩展智慧 2 - 使减法更复杂 3 - 确保svg适合横幅的宽度。

d3.js - masking shapes to create transparent sectio

所以这就是目标

这是代码本身 - 我已经给它一点清理了。 http://jsfiddle.net/NYEaX/1521/

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 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);
});