Question

我正在测试博客中的d3js树形图。请参阅实时jsbin here。

我想控制每个小区域的每个矩形的填充颜色。我不知道在哪里可以控制rect的颜色。我发现以下部分是设置颜色。

 childEnterTransition.append("rect")
            .classed("background", true)
            .style("fill", function(d) {
                return color(d.parent.name);
            });

我尝试去除填充或更改颜色，填充颜色不起作用。例如，我想将所有矩形填充颜色更改为FFF，它根本不起作用。

 childEnterTransition.append("rect")
            .classed("background", true)
            .style("fill", function(d) {
                return '#FFF';
            });

Answer 1

您将填充颜色~~设置两次~~ 三次 - 一次在＆＃34;输入＆＃34;链接新元素，然后再次在＆＃34;更新＆＃34;所有元素的链，然后在缩放过渡期间第三次。如果您只更改其中一段代码，则其他代码可能会替换您的设置。

输入代码（来自bl.ocks page）：

    childEnterTransition.append("rect")
        .classed("background", true)
        .style("fill", function(d) {
            return color(d.parent.name); //change this
        });

更新代码：您可以删除整个更新链，只需使用缩放功能将值更新为当前缩放。

    childUpdateTransition.select("rect")
        .attr("width", function(d) {
            return Math.max(0.01, d.dx);
        })
        .attr("height", function(d) {
            return d.dy;
        })
        .style("fill", function(d) {
            return color(d.parent.name); //change this
        });

缩放代码：

    zoomTransition.select("rect")
        .attr("width", function(d) {
            return Math.max(0.01, (kx * d.dx));
        })
        .attr("height", function(d) {
            return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
        })
        .style("fill", function(d) {
            return d.children ? headerColor : color(d.parent.name); //change this
        });

另外，只是为了挑剔：你的＆＃34;输入＆＃34;选择（childEnterTransition）实际上并不是一种过渡。如果是，则没有必要在那里设置颜色然后在更新中重新设置它，因为更新转换只会取消先前的转换。但是因为它不是转换，所以在将 all 元素转换为当前值之前，设置颜色会为输入元素创建一个起始值。

如何更改d3js treemap rect填充颜色

1 个答案: