javascript - 数据键函数过滤器始终返回第一个元素

Question

简短版本:绑定(bind) d3.js JSON 数据集中第一个数据元素的 DOM 元素始终显示且无法删除，所有其他元素均按预期运行。

使用 d3.js，尝试生成标准计划设置，随后填充不同的数据集。拉取一些嵌套的 JSON 数据，标准输入/更新/退出格式来修改时间表显示。需要其他地方可用的结构(struct)数据，因此在过滤和附加之前拉取后将其分配给全局:

d3.json('php/controllers/sched_struct_endpoint.php?set=' + set, function(d) {
        struct = d;
        drawAxis();
    });

(drawAxis() 是重绘函数，下面的代码来自该函数)。一切工作正常，除了第一个元素(周日的时间表显示)始终绑定(bind)/显示 - 所有其他元素完全按照预期添加/删除。认为问题可能出在我的数据过滤器上；使用天数作为关键功能，如果选择“全部”，则打算显示所有天，如果选择一天，则仅显示指定的天。星期日是第 1 天，星期一是第 2 天，等等 - 但结果数据显示始终是 [1,2] 或 [1,5] - 绝不只是 [2] 或 [5]。显示所有 [1,2,3,4,5,6,7] 按预期工作。

dayData = chartAxis.selectAll(".titleDay")
        .data(struct, function(d) { return day === 'All' ? d.day_number : d.day_number === day; } );

    var titleDay = dayData.enter()
        .append("g")
        .attr("class","titleDay");

    titleDay
        .attr("id", function(d) { return d.day_name;})
        .attr("transform", function(d,i) { return "translate(0," + (day == 'All' ? i * elem_height * 1.05 : 0) + ")" ; })

    titleDay.append("rect")
        .attr("width",daywidth)
        .attr("height", elem_height);

    titleDay.append("text")
        .text(function(d) { return d.day_name; })
        .attr("text-anchor","middle")
        .attr("transform", function(d,i) { return "translate(45," + (elem_height / 2) + ")" ; });

...(添加额外时间表元素的更多代码)...

dayData.exit().remove();

实验性添加

d3.selectAll(".titleDay").remove();

到重绘函数的开头将暂时删除第一个元素，但随后它会立即添加回来。

示例数据结构(7 个对象的数组，每个对象都有日期名称、编号和可用资源列表):

[
    {
    "day_number": "1",
    "day_name": "Sunday",
    "resources": [
        {
            "resource_id": "OR01",
            "resource_name": "OR 01",
    ...

Answer 1

看起来您正在尝试使用 key 函数来过滤数据 - 这不是它的作用。您可能想要类似的东西

.data(struct.filter(function(d) { return day === "All" || d.day_number === day; }),
      function(d) { return d.day_number; })

这将根据您指定的条件过滤数据，然后按day_number进行匹配。