Javascript 用d3.js钻取*对象？

我是一个新手程序员，在d3方面经验有限。我希望创建一个交互式分层布局，用户可以钻取每个对象并打开原始对象“框”中的嵌套对象。例如，单击某个矩形将显示该父矩形的子矩形，而保留未单击的父矩形（或最终暂时淡出它们，等等）。其思想是遵循与的类似逻辑，但仅在加载时最初显示层次结构的最高级别，然后在单击父级时打开较低级别。这就是我到目前为止看到的，点击矩形“一”应该会在矩形“一”框中显示其他矩形（例如，“一A”和“一B”）（现在，点击只会将矩形变成紫色）。如果我错过了一些基本的东西，请提前道歉。我想可能有比使用d3更简单的方法（可能是jquery），但我希望最终将嵌套的数据驱动元素进一步整合到层次结构中，这就是为什么我尝试使用d3来完成这一切。我是否应该在每个最高级别的矩形中添加SVG组，并使用事件侦听器“激活”子组？还是使用分层布局方法？还是两者的结合？任何帮助都将不胜感激

以下是迄今为止的代码：

//Make the overall SVG Container
var svgContainer = d3.select("body").append("svg")
                                 .attr("width", 1200) 
                                 .attr("height", 1200); 

//Make group for the highest level of rectangles                                     
var rectsGroup = svgContainer.append("g");

//Data for the highest level of rectangles      
var rectData = [
{ "x": 10, "y": 10, "width": 0, "height": 0, "fill": "blue", "label": "One" },
{ "x": 310, "y": 10, "width": 0, "height": 0, "fill": "red", "label": "Two" },
{ "x": 10, "y": 310, "width": 0, "height": 0, "fill": "green", "label": "Three" },
{ "x": 310, "y": 310, "width": 0, "height": 0, "fill": "orange", "label": "Four" }];

//Data for the second-highest level of rectangles within one rectangle?
var rectOneData = [
{ "x": 10, "y": 10, "width": 150, "height": 150, "fill": "purple", "label": "One_A" }];

//Creating the 4 highest-level rectangles in the group within the main SVG container

var rects = rectsGroup.selectAll("rect")
                      .data(rectData)
                       .enter()
                       .append("rect");

var rectOne = rectsGroup.select('[id="One"]')
                        .append("g");

//Add the attributes
var rectAttributes = rects
                   .attr("x", function (d) { return d.x - 155; })
                   .attr("y", function (d) { return d.y - 155; })
                   .attr("width", function (d) { return d.width; })
                   .attr("height", function (d) { return d.height; })
                   .style("fill", function (d) { return d.fill; })
                    .attr("id", function (d) { return d.label; })
                   .on("mouseover", function() {
                        console.log(this);
                        console.log(d3.select.this);

d3.select(this).transition().style("fill", "yellow");
                        })
                    .on("mouseout", function() {
                        console.log(this);
                        console.log(d3.select.this);

d3.select(this).transition().style("fill", function (d) { return d.fill; });
                        })
                   .transition()
                   .attr("x", function (d) { return d.x ; })
                   .attr("y", function (d) { return d.y ; })
                    .attr("width",300)
                    .attr("height",300)
                    .duration(1500)
                    .delay(10); 

//Acting on a particular SVG object on click...
var rectReceivingAttributes = d3.select('[id="One"]')
                    .attr("id", function (d) { return d.label; })
                        .attr("x", function (d) { return d.x ; })
                        .attr("y", function (d) { return d.y ;})
                        .attr("width", function (d) { return d.width ; })
                        .attr("height", function (d) { return d.height ; })
                    .on("click", function() {
                        rectsGroup.select('[id="One"]').transition().style("fill", "purple")});


var text = rectsGroup.selectAll("text")
                   .data(rectData)
                    .enter()
                    .append("text");

var textLabels = text
             .attr("x", function(d) { return d.x + 155; })
             .attr("y", function(d) { return d.y + 155; })
             .text( function (d) { return d.label;})
             .attr("font-family", "sans-serif")
            .attr("font-size", "20px")
             .attr("fill", "black")
             .attr("text-anchor", "middle")
             .attr("opacity", 0)
             .transition()
             .attr("opacity", 100)
             .duration(3000)
             .delay(1000);

---

听起来您只想添加最高级的对象，并根据需要加载其他数据，即当用户单击某个对象时。谢谢您的建议，@LarsKotthoff。我有点进一步（）。现在，第二个级别（“One_a”和“One_B”）在单击时显示在矩形“One”中，但我只能通过转换来实现这一点。我想我意识到我真正的问题是：如何将层次数据中的级别转换为图形中的深度，以便单击一个级别可以显示层次中的下一个级别？我有点像在上面的小提琴工作的想法，但肯定有比硬编码更好的方法。谢谢不知道你的意思。其基本思想是，您的主渲染函数将被传递到类似容器的东西，然后在其中布局当前级别。这样，无论你是在顶层还是更底层做这件事都无关紧要。