Question

我想要实现以下目标，

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

2 - 使此矩阵变焦

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

现在我想在这里获得2号，这就是我想要的，

当我添加用于缩放的代码失败时，

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（＆＃34;缩放＆＃34;，缩放）;）
你还没有定义宽度和高度 3.由于错误的换行符（可以定义转换比例的通知点），可能无法解析缩放功能。
Here是JSFiddle，其中zoom适用于矩阵的第一个元素。要点是：

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

D3.JS将缩放和列表项添加到rect

1 个答案: