javascript - 设置桑基图节点的最大高度

Question

我想使用 Amcharts4 创建一个 sankey 图。但是由于某些节点不流向其他节点，因此与流向另一个节点的节点相比，这些节点非常小。因此，我想将节点和链接的高度设置为某个值。

我编写了以下程序，我成功地为链接设置了最大高度，但还没有为节点设置：

am4core.useTheme(am4themes_animated);


// Define multi-level data
var data = [

  {
    from: "I. De Koning",
    sub: [
      {from: "1. Grondwettelijke uitkering aan de leden van het Koninklijk huis"},
      {from: "2. Functionele uitgaven van de Koning"},
      {from: "3. Doorbelastge uitgaven van andere begrotingen"}
    ]
  },
  {
    from: "IIA. Staten-Generaal",
    sub: [
      {from: "1. Wetgeving en controle Eerste Kamer"},
      {from: "2. Uitgave ten behoeve van leden en oud-leden Tweede Kamer, alsmede leden vahe tEuropees Parlement"},
      {from: "3. Wetgeving en controle Tweede Kamer"},
      {from: "4. Wetgeving en controle Eerste en Tweede Kamer"}
    ]
  },
  {
    from: "IIB. Overige Hoge Colleges van Staat"
  },
  {
    from: "III. Algemene Zaken",
    sub: [
      {from: "1. Eenheid van het algemeen regeringsbeleid"},
      {from: "4. Kabinet van de Koning"},
      {from: "5. Commisie voor toezicht op de Inlichtingen- en veiligheidsdiensten"}
    ]
  },
  {
    from: "IV. Koninkrijksrelaties",
    to: "X. Defensie",
    value: 47671,
    sub: [
      {from: "1. Waarborgfuncte", to: "2. Taakuitvoering zeestrijdkrachten", value:"46557"},
      {from: "4. Bevorderen sociaaleconomische structuur"},
      {from: "5. Schuldsandering/lopende inschrijving/leningen"},
      {from: "6. Apparaat"},
      {from: "7. Nominaal en onvoorzien", to: "2. Taakuitvoering zeestrijdkrachten", value: "1114"}
    ]
  },
  {
    from: "V. Buitenlandse Zaken",
    sub: [
      {from: "41. Internationale rechtsorde"},
      {from: "42. Veiligheid en Stabiliteit"},
      {from: "43. Europese Samenwerking"}
    ]
  },
  {
    from: "VI. Veiligheid en Justitie",
    sub: [
      {from: "31. Nationale Politie"},
      {from: "32. Rechtspleging en rechtsbijstand"},
      {from: "33. Veiligheid en criminaliteitsbestrijding"},
      {from: "34. Straffen en Beschermen"},
      {from: "36. Contraterrorisme en Nationaal Veiligheidsberaad"},
      {from: "37. Vreemdelingen"},
      {from: "91. Apparaatsuitgven kerndepartement"},
      {from: "Nominaal en onvoorzien"},
      {from: "Geheim"}
    ]
  },
  
];


var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);
chart.data = data;
chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";
chart.sortBy ="from"

// for right-most label to fit
chart.paddingRight = 300;
chart.paddingBottom = 25;


var nodeTemplate = chart.nodes.template;
nodeTemplate.maxHeight = 1;
chart.nodes.template.nameLabel.label.width = 300;

//Wraps and truncates the labels of nodes.
chart.nodes.template.nameLabel.label.truncate = false;
chart.nodes.template.nameLabel.label.wrap = true;

// make nodes draggable
var nodeTemplate = chart.nodes.template;
nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer; 
nodeTemplate.stroke = am4core.color("#fff"); //kleur 
nodeTemplate.strokeWidth = 0; //ruimte tussen blokje en lijnen
nodeTemplate.clickable = true; //erop klikken zorgt ervoor dat het weggaat.
nodeTemplate.width = 15; //hiermee vergroot je de boxen

//Title

//chart.titles.template.fontSize = 15;
//chart.titles.create().text = "Herverkaveling van Rutte III naar IV";

//hover
var hoverState = chart.links.template.states.create("hover");
hoverState.properties.fillOpacity = 0;

//link template
var linkTemplate = chart.links.template;
linkTemplate.colorMode = "gradient";
linkTemplate.fillOpacity = 0;
linkTemplate.middleLine.strokeOpacity = 0.3;
linkTemplate.middleLine.strokeWidth = 5;

// Nodes are draggable but can not be dragged down below the graph. Increase size?

// Add events on links
chart.links.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
chart.links.template.events.on("hit", function(ev) {
  chart.colors.reset();
  var linkData = ev.target.dataItem.dataContext;
  if (linkData.sub) {
    chart.data = linkData.sub;
    nav.data.push({
      name: ev.target.populateString("{fromName} → {toName}"),
      step: ev.target.dataItem.dataContext
    });
    nav.invalidateData();
  }
});

// Add navigation bar
var nav = chart.createChild(am4charts.NavigationBar);
nav.parent = chart;

nav.data = [
  {
    name: "Home"
  }
];
nav.toBack();

nav.links.template.events.on("hit", function(ev) {
  chart.colors.reset();
  var target = ev.target.dataItem.dataContext;
  if (target.step) {
    chart.data = target.step.sub;
    nav.data.splice(nav.data.indexOf(target) + 1);
    nav.invalidateData();
  } else {
    chart.data = data;
    nav.data = [
      {
        name: "Home"
      }
    ];
  }
});

我为 nodeTemplate 添加了以下内容以尝试设置最大高度：

nodeTemplate.maxHeight = 1;

但不幸的是，这并没有奏效。有人知道我需要改变什么吗？

标签： javascriptchartsamcharts