Question

我正在尝试在选择新数据集时使用d3.select替换现有div中的文本，但是我每次选择新数据集时都会添加新的div。用例是一个排行榜，用于挑选使用特定材料（金，银，铜等）创建对象的顶级人群（d.Culture）。

有问题的页面：https://3milychu.github.io/whatmakesart/
加载需要一分钟（如果您看到条形图，页面已加载）

我还尝试根据我查看的其他建议添加.remove（）和.exit（）失败。

出于某种原因，即使目标div是类，我也必须使用＆＃34; .myDiv＆＃34;而不是＆＃34; #myDiv＆＃34;看文字。

function origins(dataset) {

var totalRows = dataset.length;
console.log(totalRows);

var format = d3.format(".0%");

var origins = d3.nest()
    .key(function(d) { return d.Culture; })
    .rollup(function(v) { return v.length; })
    .entries(dataset)
    .sort(function(a,b) {return d3.descending(a.value,b.value);});
console.log(origins);

 var culture1 = d3.select(".culture").selectAll(".culture1")
    .data(origins)
    .enter()
    .append("div")
    .attr("id", "culture1")
    .filter(function (d, i) { return i === 0;})
    .text(function(d) { return d.key + " " + format(d.value/totalRows); }) 

 <--repeat for "culture2", "culture3", etc. --> 

};

我试图定位的html div：

<!-- Origins -->
<div id ="origins">
    <h1>Origins</h1>
    <div class="culture" id="culture1"></div>
    <div class="culture" id="culture2"></div>
    <div class="culture" id="culture3"></div>
    <div class="culture" id="culture4"></div>
    <div class="culture" id="culture5"></div>
    <div class="culture" id="culture6"></div>
    <div class="culture" id="culture7"></div>
</div>

Answer 1

这里发生了一些有问题的事情。

首先，当您执行div时，您会添加许多具有相同ID的.attr("id", "culture1")个。这可能会导致各种意想不到的问题。

filter功能并不像您期望的那样完美。执行.filter(function (d, i) { return i === 0;})后，您仍然会为与过滤器不匹配的所有元素创建空div个。在chrome中使用DOM检查器，你会发现你有大量的空div。如果您只是尝试从数组中获取第一个元素，我建议仅将该数据传递到data函数中。如果origins每次将其传递到data函数时将会有不同的大小，那么您需要在退出时实现删除元素。但是，如果origins数组的大小相同，则现有数据应该只更新。

这应该有助于修复您所看到的行为。可能存在其他问题，但这些问题应该首先解决。

Answer 2

我在选择更改时更换了以下内容：

function origins(dataset) {

var totalRows = dataset.length;
console.log(totalRows);

var format = d3.format(".0%");

var origins = d3.nest()
    .key(function(d) { return d.Culture; })
    .rollup(function(v) { return v.length; })
    .entries(dataset)
    .sort(function(a,b) {return d3.descending(a.value,b.value);});
// console.log(origins);

d3.select(".culture").selectAll("text").remove()

var culture1 = d3.select(".culture").selectAll("#ranks")
        .data(origins.filter(function (d, i) { return i === 0;}))
        .enter()
        .append("text")
        .attr("id", "culture1")
        .text(function(d) { return d.key + " " + format(d.value/totalRows); })
        .exit();

<--repeat for all ranks -->
};

html更改为：

    <div id ="origins">
        <h1>Origins</h1>
        <div class="culture" id="ranks"></div>
    </div>

关键是在声明变量和追加之前选择div中的元素类型和.remove（）。同样根据Jeff的建议，在.data（）处通过过滤器会阻止创建额外的元素。

使用d3替换现有div中数据集更改时的文本值

2 个答案: