d3.js自定义图表的缩放和响应

Question

我正在构建一个在桌面上开始看起来很好的构建，但图表组件没有处理响应的要求。

我知道这样的事情会产生缩放效果

我制作的一些图表包含了遮蔽效果。在尝试调整/触摸这些组件时，我有时会看到不透明度出现故障。另外，对于像这样的图表的宽度/高度，我会拿起当前的屏幕尺寸/高度来将其提供给图表吗？

这是一个小提琴。 http://jsfiddle.net/NYEaX/1555/

      function maskMaker(el) {

        var backcolor = $(el).data("color");
        var backopacity = $(el).data("opacity");

        var data = [{
          "label": "Romance level in 2 years",
          "x": 222,
          "y": 100,
          "value": 148
        }]


        // Set the main elements for the series chart
        var svgroot = d3.select($(el)[0]).append("svg");
        var defs = svgroot
          .append("defs");
        var mask = 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);

        var invisiblebubble = mask.append("circle")
          .data(data);

        invisiblebubble
          .attr("cx", 550)
          .attr("cy", 250)
          .transition()
          .duration(900)
          .attr("r", function(d) {
            return d.value;
          });



        defs.append(function() {
            return mask.node().cloneNode(true)
          })
          .attr("id", "myMaskForPointer")
          .select("rect")
          .style("opacity", 1.0);
        /*d3.select(defs.append(mask.node().cloneNode()))
          .style("opacity", )*/


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


        //__labels 
        var centrallabel = svgroot.append("g")
          .attr("class", "centrallabel")
          .data(data);




    centrallabel
      .append("text")
      .attr("text-anchor", "middle")
      .attr("x", 550)
      .style("opacity",0)
      .attr("y", 250 + 10)
      .text(function(d) {
        return "200";
      })
      .transition()
      .duration(2000)
       .style("opacity", 1)      





        //__labels 
        var labels = svgroot.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 - 10;
          })
          .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;
            d.cx = 550;
            d.cy = 250;
          })
          .transition()
          .duration(300)

        labels
          .transition()
          .duration(300)

        //__ exit
        labels.exit().remove();
        //__labels         
        //__labels 


        //__pointers
        var pointers = svgroot.append("g")
          .attr("class", "pointers")

        defs.append("marker")
          .attr("id", "circ")
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("refX", 3)
          .attr("refY", 3)

        var pointers = pointers.selectAll("path.pointer")
          .data(data);

        //__ enter
        pointers.enter()
          .append("path")
          .attr("class", "pointer")
          .style("fill", "none")
          .attr("marker-end", "url(#circ)")
          .attr("mask", "url(#myMaskForPointer)")

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



      }

我最近的代码是这样的。

  function maskMaker(el){

    var backcolor = $(el).data("color");
    var backopacity = $(el).data("opacity");

    var height = $(el).data("height");
    var width = $(el).data("width");

    var labelName = $(el).data("label-name");
    var bubbleValue = $(el).data("bubble-value");
    var displaceLeft = $(el).data("displace-left");
    var displaceTop = $(el).data("displace-top");

    var data = [{
      "label": labelName,
      "x": displaceLeft,
      "y": displaceTop,
      "value": bubbleValue
    }];

    console.log("MASK data", data);


    // Set the main elements for the series chart
    var svgroot = d3.select($(el)[0]).append("svg");

    // filters go in defs element
    var defs = svgroot.append("defs");

    var mask = defs.append("mask")
                 .attr("id", "myMask");

    mask.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", "100%")
      .attr("height", "100%")
      .style("fill", "white")
      .style("opacity", backopacity);


  var invisiblebubble = mask.append("circle")
    .data(data);


  //create a fixed bubble first                  
    invisiblebubble
      .attr("cx", "50%")
      .attr("cy", "50%")
      .attr("r", function(d) {
        return d.value-20;
      });            


   //now mask the fixed circle     
    var masker = defs.append(function() { 
      return mask.node().cloneNode(true)
    })
      .attr("id", "myMaskForPointer")
      .select("rect")
      .style("opacity", 0.8);

    invisiblebubble
      .attr("r", 10);

   //animate this circle
    invisiblebubble
      .attr("cx", "50%")
      .attr("cy", "50%")
      .transition()
      .duration(1800)
      .attr("r", 10)
      .transition()
      .duration(900)
      .attr("r", function(d) {
        return d.value;
      });


   //apply the rest of the chart elements 
    var svg = svgroot
      .attr("class", "series")
      .attr("width", "1120px")
      .attr("height", "500px")
      .append("g")
      .attr("transform", "translate(0,0)")


    var rect = svg
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", "100%")
      .attr("height", "100%")
      .attr("mask", "url(#myMask)")
      .style("fill", backcolor);


        /*
        //__labels 
        var centrallabel = svgroot.append("g")
          .attr("class", "centrallabel")
          .data(data);

    centrallabel    
          .append("text")
          .attr("text-anchor", "middle")
          .attr("x", 550)
          .attr("y", 250 + 10)
          .text(function(d) {
            return "200";
          })
          */                    


        function addLabel(){

          //__labels 
          var labels = svgroot.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-10;
            })
            .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;
              d.cx = 550;
              d.cy = 250;
            })
            .transition()
            .duration(300)

          labels
            .transition()
            .duration(300)

          //__ exit
          labels.exit().remove();
          //__labels                     
        }


        function addPointer(){
          //__pointers
          var pointers = svgroot.append("g")
            .attr("class", "pointers");


          var dots = defs.append("marker")
                .attr("id", "circ")
                .attr("markerWidth", 6)
                .attr("markerHeight", 6)
                .attr("refX", 3)
                .attr("refY", 3);                    


          var pointers = pointers.selectAll("path.pointer")
            .data(data);

          //__ enter
          pointers.enter()
            .append("path")
            .attr("class", "pointer")
            .style("fill", "none")
            .attr("marker-end", "url(#circ)")
            .attr("mask", "url(#myMaskForPointer)")

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

        //delay for the mask
        setTimeout(function(){ 
          addLabel();
          addPointer(); 
        }, 1000);  

  }

  maskMaker($this);