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

D3.JS add zoom and listitems to rect

本文关键字：列表缩放添加 JS rect D3 更新时间：2023-09-26

我想实现以下目标，

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

您提供的代码有几个问题：
1.缩放的定义存在语法错误（.on（"缩放"，缩放）；）
2.你还没有定义宽度和高度
3.缩放后的函数可能因为换行错误而无法解析（请注意您定义转换比例的地方）。
这里是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);