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