Question

我有一个包布局图表，显示Web应用程序的公司和用户。该图表具有独立的数据集，表示不同的时间段。

示例 -

所有用户
仅限上周内登录的用户
仅限过去30天内登录的用户
...

我的数据集结构如下 -

{
  all: {
    name: "Web App",
    children: [
      {
        name: "Firm 1",
        size: 2,
        children: [
          {
            name: "Cathy",
            size: 1
          },
          {
            name: "Paula",
            size: 1
          }
        ]
      },
      {
        name: "Firm 2",
        size: 1,
        children: [
          {
            name: "Sean",
            size: 1
          }
        ]
      },
      {
        name: "Firm 3",
        size: 2,
        children: [
          {
            name: "Jennifer",
            size: 1
          },
          {
            name: "Amy",
            size: 1
          }
        ]
      }
    ]
  },
  loggedIn7Day: {
    name: "Web App",
    children: [
      {
        name: "Firm 1",
        size: 1,
        children: [
          {
            name: "Paula",
            size: 1
          }
        ]
      },
      {
        name: "Firm 3",
        size: 1,
        children: [
          {
            name: "Kristin",
            size: 1
          }
        ]
      }
    ]
  }
}

我无法弄清楚如何在更新数据集后正确绑定圆圈。

更新数据集后，一些父节点绑定到子节点，子节点绑定为父节点。

以下是我更新数据集并绑定圈子的方法 -

//change property for pack based on filter
switch (filter) {
    case "1":
        root = allData.loggedIn90Day;
        break;
    case "2":
        root = allData.loggedIn30Day;
        break;
    case "3":
        root = allData.loggedIn7Day;
        break;
    default:
        root = allData.all;
}

circle = svg.selectAll(".node")
    .data(pack.nodes(root));

circle
    .enter()
    .append("circle");

circle
    .transition()
    .duration(1500)
    .attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
    .attr("transform", function (d) { return "translate(" + (d.x - view[0]) * k + "," + (d.y - view[1]) * k + ")"; })
    .attr("r", function (d) { return d.r * k; });

circle.exit()
    .transition()
    .remove();

我有一种感觉，我错过了一些简单但我无法理解的东西。

这是一个JS小提琴，显示问题 - https://jsfiddle.net/t989hfp9/

非常感谢任何帮助!!!!

Answer 1

问题是节点没有唯一标识符。

我向数据集中的所有节点添加了一个id属性 -

{
  all: {
    name: "Web App",
    id: 0,
    children: [
      {
        name: "Firm 1",
        id: 1;
        size: 2,
        children: [
          {
            name: "Cathy",
            id: 2,
            size: 1
          },
          {
            name: "Paula",
            id: 3,
            size: 1
          }
        ]
      },
      {
        name: "Firm 2",
        size: 1,
        id: 4;
        children: [
          {
            name: "Sean",
            id: 5,
            size: 1
          }
        ]
      },
      {
        name: "Firm 3",
        size: 2,
        id: 7,
        children: [
          {
            name: "Jennifer",
            id: 8,
            size: 1
          },
          {
            name: "Amy",
            id: 9,
            size: 1
          }
        ]
      }
    ]
  },
  loggedIn7Day: {
    name: "Web App",
    id: 0,
    children: [
      {
        name: "Firm 1",
        id: 1;
        size: 1,
        children: [
          {
            name: "Paula",
            id: 3,
            size: 1
          }
        ]
      },
      {
        name: "Firm 3",
        size: 1,
        id: 7;
        children: [
          {
            name: "Amy",
            id: 9,
            size: 1
          }
        ]
      }
    ]
  }
}

然后在将数据集绑定到包时指定使用唯一标识符的属性 -

circle = svg.selectAll("circle")
    .data(pack.nodes(root), function (d) { return d.id; });

这是固定的小提琴 - https://jsfiddle.net/ferlin_husky/wzuvob6m/

包布局不能正确绑定到更新的数据集

1 个答案: