Javascript 缩放在SVG上不起作用

我将在svg图形上实现缩放行为，但缩放行为根本不起作用。控制台中没有错误。我想知道这是否是因为这是来自inkscape的svg图形

拉小提琴

代码

var changeArray=[-60，-40，-20,0,20,40,60]；
var colorArray=[“#009870”、“#36b18c”、“#99cfb8”、“#FFBF”、“#f39a93”、“#e95058”、“#e4003a”]；
var colorDark2S=新数组（）；
var colorDark4S=新数组（）；
var不变量=0；
var数据集；
功能检查（数据）{
var data_clean=[]；//为清除数据准备的变量
用于（数据中的var i）{
数据清理。推送（数据[i]。更改\u总计）；
}
//工具提示
var w=500，
h=500；
var zoom=d3.behavior.zoom（）
.scaleExtent（[1,10]）
。打开（“缩放”，缩放）；
//将初始化移到这里，以确保数据集在那里
var main_svg=d3。选择（“0级”）
.selectAll（“路径”）
.数据（数据清洁）
.attr（“笔划”，“#88888”）
.attr（“笔划宽度”，“1px”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.样式（“填充”，功能填充（数据清洁）{
颜色变异；
if（数据清理

您似乎没有配置任何鼠标滚动事件。。（用于缩放）我该如何做从示例中不清楚您的缩放正在工作。问题是，您没有缩放任何内容。您正在缩放

容器

，该容器是附加到

main\u svg

的空

g

。您需要将DOM的一部分移动到附加的组中，或者让

container

引用DOM的其他部分。这取决于你在追求什么。作为概念证明，您可以将赋值更改为

var container=main\u svg

将实际缩放圆圈及其内容。@作为旁白，您应该仔细查看异步调用。

d3.xml（）

和

d3.json（）

都是异步的，很可能会并行执行，导致一些竞争条件。由于这个原因，我第一次执行你的代码失败了。通过将对

d3.json（）

的调用放入提供给

d3.xml（）

的回调中，可以很容易地解决这个问题。这样，在SVG

picture.SVG

本身完成加载后，将调用函数

checkIt（）

。是否确实要放大整个SVG？这将包括按钮和标签以及。正如您提到的，SVG本身将是一个Inkscape图形，在创建图像时，最好将参与缩放的所有内容放在一个组中，并为缩放行为注册该组。您似乎没有配置任何鼠标滚动事件。。（用于缩放）我该如何做从示例中不清楚您的缩放正在工作。问题是，您没有缩放任何内容。您正在缩放

容器

，该容器是附加到

main\u svg

的空

g

。您需要将DOM的一部分移动到附加的组中，或者让

container

引用DOM的其他部分。这取决于你在追求什么。作为概念证明，您可以将赋值更改为

var container=main\u svg

将实际缩放圆圈及其内容。@作为旁白，您应该仔细查看异步调用。

d3.xml（）

和

d3.json（）

都是异步的，很可能会并行执行，导致一些竞争条件。由于这个原因，我第一次执行你的代码失败了。通过将对

d3.json（）

的调用放入提供给

d3.xml（）

的回调中，可以很容易地解决这个问题。这边

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