AmCharts-如何仅在强制定向树上扩展第一级子级

Question

我正在研究具有3个级别的力导向树，当前，当我单击以展开第二级儿童时，第三级将同时展开。

是否有一种方法可以在单击一级气泡时仅显示二级孩子，而仅在单击二级气泡时显示第三级孩子？

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();

var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());

series.data = [

  {
    name: 'One',
    color: ("#6ab8da"),
    children: [{
        name: '1',

        children: [{

            name: 'Blackberry',
            value: 1
          },
          {
            name: 'Raspberry',
            value: 1
          },
          {
            name: 'Blueberry',
            value: 1
          },
          {
            name: 'Strawberry',
            value: 1
          }
        ]
      },

      {
        name: '2',
        children: [{
            name: 'Raisin',
            value: 1
          },
          {
            name: 'Prune',
            value: 1
          }
        ]
      },

      {
        name: '3',
        children: [{
            name: 'Coconut',
            value: 1
          },
          {
            name: 'Cherry',
            value: 1
          },
          {
            name: 'Pomegranate',
            value: 1
          },
          {
            name: 'Pineapple',
            value: 1
          },
          {
            name: 'Grape',
            value: 1
          },
          {
            name: 'Apple',
            value: 1
          },
          {
            name: 'Peach',
            value: 1
          },
          {
            name: 'Pear',
            value: 1
          }
        ]
      },

      {
        name: '4',
        children: [{
            name: 'Grapefruit',
            value: 1
          },
          {
            name: 'Orange',
            value: 1
          },
          {
            name: 'Lemon',
            value: 1
          },
          {
            name: 'Lime',
            value: 1
          }
        ]
      }
    ]
  },


  {
    name: 'Two',
    color: ("#6872d9"),
    children: [{
        name: 'Visites vistuelles'
      },

      {
        name: 'Lorem ipsum'
      }
    ]
  },

  {
    name: 'Three',
    color: ("#a267d9"),
    children: [{
        name: 'Papery/Musty',
        children: [{
            name: 'Stale',
            value: 1
          },
          {
            name: 'Cardboard',
            value: 1
          },
          {
            name: 'Papery',
            value: 1
          },
          {
            name: 'Woody',
            value: 1
          },
          {
            name: 'Moldy/Damp',
            value: 1
          },
          {
            name: 'Musty/Dusty',
            value: 1
          },
          {
            name: 'Musty/Earthy',
            value: 1
          },
          {
            name: 'Animalic',
            value: 1
          },
          {
            name: 'Meaty Brothy',
            value: 1
          },
          {
            name: 'Phenolic',
            value: 1
          }
        ]
      },

      {
        name: 'Chemical',
        children: [{
            name: 'Bitter',
            value: 1
          },
          {
            name: 'Salty',
            value: 1
          },
          {
            name: 'Medicinal',
            value: 1
          },
          {
            name: 'Petroleum',
            value: 1
          },
          {
            name: 'Skunky',
            value: 1
          },
          {
            name: 'Rubber',
            value: 1
          }
        ]
      }
    ]
  },


  {
    name: 'Four',
    color: ("#da66cc"),
    children: [{
        name: 'Pipe Tobacco',
        value: 1
      },
      {
        name: 'Tobacco',
        value: 1
      },
      {
        name: 'Burnt',
        children: [{
            name: 'Acrid',
            value: 1
          },
          {
            name: 'Ashy',
            value: 1
          },
          {
            name: 'Smoky',
            value: 1
          },
          {
            name: 'Brown, Roast',
            value: 1
          }
        ]
      },

      {
        name: 'Cereal',
        children: [{
            name: 'Grain',
            value: 1
          },
          {
            name: 'Malt',
            value: 1
          }
        ]
      }
    ]
  }
];



series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";

series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;

series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/

series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;

series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px;
}

<body>
  <script src="//www.amcharts.com/lib/4/core.js"></script>
  <script src="//www.amcharts.com/lib/4/charts.js"></script>
  <script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
  <script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
  <div id="chartdiv"></div>
</body>

JSFiddle here

Answer 1

是的，有一种方法可以将行为从扩展所有节点更改为仅单击该节点的下一个直接级别。

默认情况下，expandAll property中的ForceDirectedNode被设置为true。

您可以通过以下所有方法将其设置为false

series.nodes.template.expandAll = false;

这将为您提供所需的行为：

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();

var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());

series.nodes.template.expandAll = false;

series.data = [

  {
    name: 'One',
    color: ("#6ab8da"),
    children: [{
        name: '1',

        children: [{

            name: 'Blackberry',
            value: 1
          },
          {
            name: 'Raspberry',
            value: 1
          },
          {
            name: 'Blueberry',
            value: 1
          },
          {
            name: 'Strawberry',
            value: 1
          }
        ]
      },

      {
        name: '2',
        children: [{
            name: 'Raisin',
            value: 1
          },
          {
            name: 'Prune',
            value: 1
          }
        ]
      },

      {
        name: '3',
        children: [{
            name: 'Coconut',
            value: 1
          },
          {
            name: 'Cherry',
            value: 1
          },
          {
            name: 'Pomegranate',
            value: 1
          },
          {
            name: 'Pineapple',
            value: 1
          },
          {
            name: 'Grape',
            value: 1
          },
          {
            name: 'Apple',
            value: 1
          },
          {
            name: 'Peach',
            value: 1
          },
          {
            name: 'Pear',
            value: 1
          }
        ]
      },

      {
        name: '4',
        children: [{
            name: 'Grapefruit',
            value: 1
          },
          {
            name: 'Orange',
            value: 1
          },
          {
            name: 'Lemon',
            value: 1
          },
          {
            name: 'Lime',
            value: 1
          }
        ]
      }
    ]
  },


  {
    name: 'Two',
    color: ("#6872d9"),
    children: [{
        name: 'Visites vistuelles'
      },

      {
        name: 'Lorem ipsum'
      }
    ]
  },

  {
    name: 'Three',
    color: ("#a267d9"),
    children: [{
        name: 'Papery/Musty',
        children: [{
            name: 'Stale',
            value: 1
          },
          {
            name: 'Cardboard',
            value: 1
          },
          {
            name: 'Papery',
            value: 1
          },
          {
            name: 'Woody',
            value: 1
          },
          {
            name: 'Moldy/Damp',
            value: 1
          },
          {
            name: 'Musty/Dusty',
            value: 1
          },
          {
            name: 'Musty/Earthy',
            value: 1
          },
          {
            name: 'Animalic',
            value: 1
          },
          {
            name: 'Meaty Brothy',
            value: 1
          },
          {
            name: 'Phenolic',
            value: 1
          }
        ]
      },

      {
        name: 'Chemical',
        children: [{
            name: 'Bitter',
            value: 1
          },
          {
            name: 'Salty',
            value: 1
          },
          {
            name: 'Medicinal',
            value: 1
          },
          {
            name: 'Petroleum',
            value: 1
          },
          {
            name: 'Skunky',
            value: 1
          },
          {
            name: 'Rubber',
            value: 1
          }
        ]
      }
    ]
  },


  {
    name: 'Four',
    color: ("#da66cc"),
    children: [{
        name: 'Pipe Tobacco',
        value: 1
      },
      {
        name: 'Tobacco',
        value: 1
      },
      {
        name: 'Burnt',
        children: [{
            name: 'Acrid',
            value: 1
          },
          {
            name: 'Ashy',
            value: 1
          },
          {
            name: 'Smoky',
            value: 1
          },
          {
            name: 'Brown, Roast',
            value: 1
          }
        ]
      },

      {
        name: 'Cereal',
        children: [{
            name: 'Grain',
            value: 1
          },
          {
            name: 'Malt',
            value: 1
          }
        ]
      }
    ]
  }
];



series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";

series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;

series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/

series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;

series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px;
}

<body>
  <script src="//www.amcharts.com/lib/4/core.js"></script>
  <script src="//www.amcharts.com/lib/4/charts.js"></script>
  <script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
  <script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
  <div id="chartdiv"></div>
</body>

jsfiddle叉：

https://jsfiddle.net/notacouch/4wfc2duj/

希望这会有所帮助。