d3 can't edit children css

d3 can't edit children css

本文关键字：edit children css can d3      更新时间：2023-09-26

我刚开始使用d3但看起来很简单的东西让我很抓狂，基本上我用的是d3的分区图，我的想法是，当我点击一个元素时，我将把它的填充颜色改为红色，这不是问题，很简单，但我还想把它的所有后代填充颜色都改为红色。我可以访问子数据和子数据的子数据，并且只需要递归函数来更改颜色，但是我似乎无法访问与每个子元素相关的rect元素。我试过d3.select(child)。样式("填充"，"红色")功能，但它不起作用，我猜我做错了什么，但有人能指出我在正确的方向?

我在本地有这个，但我基本上使用相同的例子(我添加了jquery到我的解决方案)http://mbostock.github.io/d3/talk/20111018/partition.html

在这里，我使用firebug在第84行partition.html中设置了一个断点。要命中断点，我只需点击图形中的一个蓝色方框，从那里我想要的是能够选择矩形或g个元素与我点击的那个相关联。

再次，我现在可以做d.children[0]来获取第一个子元素的数据，但我不知道如何访问/编辑它的css来改变它的填充颜色。

我知道我可能没有给出最好的解释，我很乐意回答任何问题或试图澄清任何困惑。

分区布局

像我到目前为止使用过的所有d3布局一样，分区布局都是关于数据的-而不是DOM元素。不幸的是，就像我到目前为止使用过的所有布局一样，文档一开始就错了，陈述了完全相反的内容…

分区布局产生邻接图:节点链接树图的空间填充变体。与在层次结构中绘制父节点和子节点之间的链接不同，节点被绘制为实体区域(弧线或矩形)，它们相对于其他节点的位置显示了它们在层次结构中的位置。节点的大小编码了一个难以在节点链接图中显示的定量维度。

它不这样做:)
在您链接的示例中，对分区对象的唯一引用是在容器选择的data方法中。

[59]  var g = vis.selectAll("g")
[60]      .data(partition.nodes(root))

布局的真正作用是…

分区布局产生一个数据结构和支持生成邻接图的方法:一个节点链接树图的空间填充变体。节点可以与相对于其他节点显示显示显示显示显示在层次结构中的位置。节点的大小编码了一个难以在节点链接图中显示的定量维度。

你可以使用d3生成一个DOM结构的树，使用该数据结构。

我的观点是(特别是)没有节点结构-在节点之间的引用-由布局创建。这取决于你。

partition.nodes(root)返回的对象只是js object类型的平面数组，没有引用任何DOM元素。但是，如果确实具有丰富的状态集，可以为您提供构建DOM结构所需的所有定位信息。

选择子节点

如果你研究渲染的结构，你会注意到所有的节点在任何给定的时间都在DOM结构中;只有它们的大小和位置被调整以适应可视化。您还会注意到，子节点和父节点之间存在严格的空间关系:任何位于特定节点右侧的节点，如果其垂直位置在该节点的高度范围内，则是该节点的子节点。此外，如果您查看绑定到每个节点的数据结构，您将看到这些成员:x y dx dy。这些是节点的规范化空间特征，因此，给定所选节点的这种状态，您可以过滤DOM结构中的所有节点，以返回子节点的节点列表。

有不止一种方法来实现这个d3，但一种方法是使用selection.classed方法…

    function hover(dActive){
        var x0 = dActive.x, y0 = dActive.y,
            x1 = x0 + dActive.dx, y1 = dActive.dy;
        g.classed("highlighted", function(d){
            return (d.y > y0) && (d.x >= x0) && (d.x < x1)
        })
    }

下面是该示例的修改版本，使用上述策略，在悬停时突出显示子节点…

    var w = 600, //1120,
        h = 200, //600,
        x = d3.scale.linear().range([0, w]),
        y = d3.scale.linear().range([0, h]);
    var vis = d3.select("body").append("div")
        .attr("class", "chart")
        .style("width", w + "px")
        .style("height", h + "px")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
    var partition = d3.layout.partition()
        .value(function(d) { return d.size; });
    d3.json("https://rawgit.com/cool-Blue/SO-Questions/master/partition/flare.json", function(root) {
        var g = vis.selectAll("g")
            .data(partition.nodes(root))
            .enter().append("svg:g")
            .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
            .on("click", click)
            .on("mouseover", hover)
            .on("mouseout", function(){g.classed("highlighted", false)});
        var kx = w / root.dx,
            ky = h / 1;
        g.append("svg:rect")
            .attr("width", root.dy * kx)
            .attr("height", function(d) { return d.dx * ky; })
            .attr("class", function(d) {
                return d.children ? "parent" : "child";
            });
        g.append("svg:text")
            .attr("transform", transform)
            .attr("dy", ".35em")
            .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
            .text(function(d) { return d.name; })
        d3.select(window)
            .on("click", function() { click(root); })
        function click(d) {
            if(!d.children) return;
            kx = (d.y ? w - 40 : w) / (1 - d.y);
            ky = h / d.dx;
            x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
            y.domain([d.x, d.x + d.dx]);
            var t = g.transition()
                .duration(d3.event.altKey ? 7500 : 750)
                .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
            t.select("rect")
                .attr("width", d.dy * kx)
                .attr("height", function(d) { return d.dx * ky; });
            t.select("text")
                .attr("transform", transform)
                .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
            d3.event.stopPropagation();
        }
        function hover(dActive){
            var x0 = dActive.x, y0 = dActive.y,
                x1 = x0 + dActive.dx, y1 = dActive.dy;
            g.classed("highlighted", function(d){
                return (d.y > y0) && (d.x >= x0) && (d.x < x1)
            })
        }
        function transform(d) {
            return "translate(8," + d.dx * ky / 2 + ")";
        }
    });
body {margin: 0;}
        .chart {
            display: block;
            margin: auto;
            margin-top: 0;
            font-size: 11px;
        }
        rect {
            stroke: #eee;
            fill: #aaa;
            fill-opacity: .3;
        }
        rect.parent {
            cursor: pointer;
            fill: steelblue;
        }
        text {
            pointer-events: none;
        }
        .highlighted rect {
            /*outline: 1px solid red;*/
            fill-opacity: 1;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

相关文章：