Question

我的代码工作，它显示了我的数据的元素，但d3在更改我的数据并再次运行相同的代码后不更新我的SVG元素的文本。我必须刷新整个网站才能改变。

var blackbox= d3.select("#content")
                            .selectAll(".silencer")
                            .data([0]);

                blackbox.enter()
                    .append("div")
                    .attr("class", "silencer")
                    .attr("id", "silencer");

                    blackbox.exit().remove();

                    var box = blackbox.selectAll(".ursa")
                    .data(fraung);

                    box.enter()
                    .append("div")
                    .attr("class", "ursa")                      
                    .each(function(d) {

                        d3.select(this)
                        .append("svg")                  
                        .attr("class", "invoker")                           
                        .each(function(d) {


                            d3.select(this).append("svg:image")
                                .attr("xlink:href", "images/qwer.png")
                                .attr("x", "0")
                                .attr("y", "0")
                                .attr("width", "100")
                                .attr("height", "100")
                                .append("title")
                                .text(function(d) {return (d.name)});   

                        });

                        d3.select(this).append("div")
                        .attr("class", "chen")              
                        .each(function(d) {


                            d3.select(this).append("table")
                            .attr("class", "tab")
                            .each(function(d) {
                                d3.select(this).append("tbody")
                                .each(function(d) {

                                    d3.select(this).append("tr")
                                    .text(function(d) {return("Name: ")})
                                    .attr("class", "key")
                                    .each(function(d) {
                                        d3.select(this).append("td")
                                        .text(function(d) {return (d.name)});
                                    });

                                }); 
                            });
                        }); 
                }); 

                box.exit().remove();

Answer 1

在加载第二个数据集之前，听起来您的SVG元素没有被清除，因此第二个数据集正在第一个数据集后面绘制。如果唯一改变的是文本，那么看起来根本就没有任何事情发生。浏览器刷新将清除任何动态绘制的内容。在调用“blackbox”之前，您可以执行类似这样的操作来清除“#content”元素中的所有内容，我假设它是您的SVG容器。

if(!d3.select("#content").empty()) d3.select("#content").remove();

这将完全删除SVG容器。因此，在加载新数据之前，您必须再次创建它。或者，如果您只想从SVG容器中删除子元素，则可以执行以下操作：

if(!d3.select("#content").selectAll("*").empty()) d3.select("#content").selectAll("*").remove();

不会更新.each函数中的d3.js元素

1 个答案: