缩放不在SVG上工作

Question

我正在使用this example来修改我的svg绘图上的动物园行为，并且缩放行为根本不起作用。控制台中没有错误。我想知道这是不是因为这是一个来自inkscape的svg绘图。

小提琴 https://jsfiddle.net/n5v84svm/36/

码

var changeArray = [-60,-40,-20,0,20,40,60];
var colorArray = ["#009870", "#36b18c", "#99cfb8", "#ffffbf", "#f39a93", "#e95058", "#e4003a"];

var colorDark2S = new Array();
var colorDark4S = new Array();
var invariant = 0;

var dataset;
    function checkIt(data){
     var data_clean = []; //prepared variable for clear data
    for (var i in data) {
      data_clean.push(data[i].Change_total);
      }

// tooltips
var w = 500,
    h = 500;

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

  //move initialisation here, to be sure dataset is there
  var main_svg =  d3.select("#level_0")
               .selectAll("path")
               .data(data_clean)
               .attr("stroke", "#888888")
               .attr("stroke-width", "1px")
               .attr("stroke-linejoin","round")
               .attr("stroke-linecap","round")
               .style("fill", function fill(data_clean){
                var color;
                if(data_clean < changeArray[0])
                             {color = colorArray[0]
                           colorDark4S[invariant] = true;}
                else {
                if(data_clean < changeArray[1])
                   {
                    color = colorArray[1]
                    colorDark4S[invariant] = true;
                     } else {
                    if(data_clean < changeArray[2])
                        {
                    color = colorArray[2]
                    colorDark4S[invariant] = true;
                     } else {
                      if(data_clean < changeArray[3])

                     {color = colorArray[3]
                       } else {
                      if(data_clean < changeArray[4])
                        {
                       color = colorArray[4]
                      } else {
                      if(data_clean < changeArray[5])
                       {
                         color = colorArray[5]
                       } else  {
                    color = colorArray[6]
                    colorDark4S[invariant] = true;
                  }
                }
              }
            }
        }
      }
                return color
               })
 .on("mouseout", function () {
    d3.select(this)
    .style("stroke-width", "1px")
    .style("stroke", "#888888");
})
 .on("mouseover", function(d) {
           d3.select(this)
          .style("stroke-width", "3px")
          .style("stroke", "#000")
          .attr("stroke-linejoin","round")
          .attr("stroke-linecap","round");

            })
  .call(zoom);

var container = main_svg.append("g");

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

}

var svg_0 = d3.xml("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/301b01028c9976a3846a3a5b068ea5abe8de0d65/picture.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode)
});

d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);