D3.JS添加变焦和listItems中RECT

Question

我要实现以下，

1 - 所提供的颜色 完成

2创建矩形给定列矩阵 - 使这个矩阵变焦能够

3 - 将列表项添加到每个矩形中，如果完全缩小和放大，它将只显示其中的列表项的数量，它将显示列表项有标题。

现在我想在这里实现2号，这是我想，

http://jsfiddle.net/nhe613kt/25/

当我进行缩放失败添加代码，

var svgContainer = d3.select("body").append("svg") 
            .attr("width", 300) 
            .attr("height", 300) 
            .style("background-color", "black"); 

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

var zoom = d3.behavior.zoom() 
.scaleExtent([1, 8]) 
.on("zoom", zoomed); 
.size([width, height]); 



var rectangle1 = svgContainer.append("rect") 
          .attr("x", 0) 
          .attr("y", 0) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red") 
          .call(zoom);; 


var rectangle2 = svgContainer.append("rect") 
          .attr("x", 100) 
          .attr("y", 0) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "yellow"); 

var rectangle3 = svgContainer.append("rect") 
          .attr("x", 200) 
          .attr("y", 0) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red"); 

var rectangle4 = svgContainer.append("rect") 
          .attr("x", 0) 
          .attr("y", 100) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "yellow"); 


var rectangle5 = svgContainer.append("rect") 
          .attr("x", 100) 
          .attr("y", 100) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red"); 

var rectangle6 = svgContainer.append("rect") 
          .attr("x", 200) 
          .attr("y", 100) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "yellow"); 


var rectangle7 = svgContainer.append("rect") 
          .attr("x", 0) 
          .attr("y", 200) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red"); 


var rectangle8 = svgContainer.append("rect") 
          .attr("x", 100) 
          .attr("y", 200) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "yellow"); 

var rectangle9 = svgContainer.append("rect") 
          .attr("x", 200) 
          .attr("y", 200) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red"); 

我期望的结果将是这，

http://bl.ocks.org/mbostock/3680957

Answer 1

您提供的代码有几个问题：
1.缩放（.on（“zoom”，缩放）;）的定义中存在语法错误;
2.您尚未定义宽度和高度。
3.由于错误的换行符（您定义转换的缩放比例的注意点），缩放的函数可能无法解析。
Here是JSFiddle，其中缩放适用于矩阵的第一个元素。要点是：

// don't forget about width and height 
var width = 960, 
height = 500; 

// make sure that string defining transform attribute is correct. scale isn't a method, but part of string 
var zoomed = function() { 
    svgContainer.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}; 

// don't place semicolon after on("zoom", zoomed) 
var zoom = d3.behavior.zoom() 
.scaleExtent([1, 8]) 
.on("zoom", zoomed) 
.size([width, height]); 

// add zoom behaviour to desired rectangle 
var rectangle1 = svgContainer.append("rect") 
         .attr("x", 0) 
         .attr("y", 0) 
         .attr("width", 100) 
         .attr("height", 100) 
         .attr("fill", "red") 
         .call(zoom);