gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 16:57:14 25 4
gpt4 key购买 nike

我想实现以下目标,

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

关于javascript - D3.JS 添加缩放和列表项到矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29487336/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com