Javascript d3.js动态数据重新加载可能与exit（）相关。remove（）相关

我已经实现了这个d3可视化，可以加载动态数据而不是.tsv

在我的例子中，一旦服务器将新信息传递给选择器，就会在第一个图表下呈现第二个图表，而不是修改现有图表的内容

我相信这与这个append方法有关

因此，我尝试在图例和cities变量添加“g”之后添加其他exit.remove方法；但是我的javascript控制台说退出方法在那个时候不存在

---

我觉得我的方法是完全错误的，我如何像这样更新现有的图表？让第二个和第三个图形与前一个图形一起生成根本不是我想要的结果

没错，append方法每次都添加一个新的svg元素。为了防止图表重复，您需要检查svg元素是否已经存在。因此，请在开始时尝试以下内容：

var svg = d3.select("#mycontainer > svg")
if (svg.empty())
    svg = d3.select(selector).append("svg");
...

---

如中所述，此方法仅在数据运算符返回的选择上定义。因此，请确保对从.data返回的选择调用exit…

scott的回答是确保初始化只发生一次的一种方法

但是，我更喜欢d3 ic的处理方式：

var svg=d3.selectselector .选择所有“svg” .data[dataFromTSV]；//1个元素数组->1个svg元素 //如果“svg”元素已经存在，则该值将为空。 var gEnter=svg.enter .append'svg' .附加“g”； gEnter.append…；//其他元素仅附加一次，如轴 属性“宽度”。。。 .attr‘高度’。。。； //最后，使用DOM中肯定存在的元素。 var g=svg.selectg .attransform，translate+margin.left+，+margin.top+； g、 选择全部…属性。。。； 这种方法在20世纪80年代得到了例证

我更喜欢这种方法，因为它通过隐藏初始化和更新的逻辑来保持代码的声明性和真实性

我将修改原始示例：以

图例和图形都是从svgElem定义的，只有一个数据元素：

var svgElem=d3.selectMultilegraph.selectAll'svg' .数据[城市]； // ... var svg=svgElem。选择“g”； // ... var city=svg.selectAll.city 数据 函数d{返回d；}， 函数d{返回d.name；}//对象一致性 ; // ... var legend=svg。选择所有“g.legend” 数据 函数d{return d；}， 函数d{返回d.name；}//对象一致性 ; 此外，静态属性仅在元素输入或退出时设置一次，而更新属性的设置随每次更新而转换：

温柔的，温柔的 .属性类，y多行 .append'text' .attransform，旋转-90 .attry，6岁 .attrdy，.71em .styletext锚定，结束 .文本请求； 选择“g.y.multileaxis”.transition.callyAxis；

---

在我看来，代码完全遵循了enter-update-exit的循环。

我用一些jQuery和CSS巫术解决了这个问题

基本上，因为我的d3图形在我的示例中向现有选择器a div添加了一个svg元素，所以我能够动态地检查这个元素的名称

var svgtest=d3。选择选择器+>svg；获取该div的svg subchild元素。然后我可以使用jquery将该元素从dom中完全删除，然后让d3继续运行并附加svg的所有内容

 var svgtest = d3.select(selector+" > svg");
    if(!svgtest.empty())
    {
        $(selector+" > svg").remove();
    }

---

首先应该删除旧的svg，然后可以添加更新的图表。 为此，您应该在追加svg之前只添加一行。 以及它的工作原理

 var flag=d3.select("selector svg").remove();

//--您的旧代码将从这里开始----

var svg = d3.select(selector).append("svg")

---

所以它正确地检查了选择器，但是我仍然对exit方法有问题。var legend=svg.selectAll'g'。datacities.enter；图例.exit.remove；此仍然返回在我的中没有出口的方法console@CQM如果你能简化你的代码，让它显示错误，我想这对我们双方都有帮助。例如，其中的大部分内容复杂的数据、图例、文本等都与问题无关。把问题简化一下，如果你没有发现问题，那就和大家分享一下，我来看看。我上面链接到的关于退出的文档也是一个很好的资源。他们展示了一些可能有用的简单示例。我用这个答案背后的概念来解决我的问题，我在这里发布了答案，你能告诉我如何在JSFIDLE中重写我正在使用的图表以适应这个范例吗？@musicaly_但我喜欢这种1元素数组方法。美好的这个版本不会在JSFIDLE中呈现，但是它可以被整理，并且城市没有定义。你能在脚本顶部用正确格式的虚拟数据初始化它们吗？@musical\u但是它们现在已经定义好了，但它仍然不能在小提琴中运行

var svg = d3.select(selector).append("svg")