javascript - D3.JS 添加缩放和列表项到矩形

Question

我想实现以下目标，

1 - 使用提供颜色的矩形创建给定的列矩阵 完成

2 - 使这个矩阵能够缩放

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

现在我想在这里取得第二名，这就是我正在努力的，

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. zoom (.on("zoom", zoomed);)定义语法错误
2. 你没有定义宽度和高度。
3. zoomed 函数可能因为错误的换行符而无法解析(注意你定义转换比例的地方)。
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);