dTree-Seed Demo

https://github.com/JMHeartley/dTree-Seed

by huu nguyen

HTML

<!DOCTYPE html>

<body>
  <h1>Demo</h1>
  <div id="graph"></div>

  <script>
//check the Resources tab to see which scripts were loaded

data = [{
    id: 0,
    name: 'Niclas Superlongsurname',
    parent1Id: null,
    parent2Id: null,
    gender: "man"
  },
  {
    id: 1,
    name: 'Iliana',
    parent1Id: null,
    parent2Id: null,
    gender: "woman",
    nickname: "Illi"
  },
  {
    id: 2,
    name: 'James',
    parent1Id: 0,
    parent2Id: 1,
    gender: "man"
  },
  {
    id: 3,
    name: 'Alexandra',
    parent1Id: null,
    parent2Id: null,
    gender: "woman"
  },
  {
    id: 4,
    name: 'Eric',
    parent1Id: 3,
    parent2Id: 2,
    gender: "man"
  },
  {
    id: 5,
    name: 'Eva',
    parent1Id: null,
    parent2Id: null,
    gender: "woman"
  },
  {
    id: 6,
    name: 'Jane',
    parent1Id: 2,
    parent2Id: 3,
    gender: "woman"
  },
  {
    id: 7,
    name: 'Jasper',
    parent1Id: 2,
    parent2Id: 3,
    gender: "man"
  },
  {
    id: 8,
    name: 'Emma',
    parent1Id: 2,
    parent2Id: 3,
    gender: "woman"
  },
  {
    id: 9,
    name: 'Julia',
    parent1Id: 2,
    parent2Id: 3,
    gender: "woman"
  },
  {
    id: 10,
    name: 'Jessica',
    parent1Id: 2,
    parent2Id: 3,
    gender: "woman"
  }
]; //dTree's sample data in dTree-Seed's "member" format
targetId = 0; //this is Niclas's ID

dSeederOptions = { //customized to display same tree as in dTree's JSFiddle
  class: (member) => member.gender,
  textClass: (member) => {
    if (member.id === targetId) {
      return "emphasis";
    }
  },
  extra: (member) => {
    return {
      nickname: member.nickname
    };
  }
};

seededData = dSeeder.seed(data, targetId, dSeederOptions);

//I recommend checking the browser's console, it's clearer than JSFiddle (F12 > Console tab)
console.log("Before", data);
console.log("After", seededData);

dTreeOptions = { //same as in dTree's...

CSS

body {
	  font: 10px sans-serif;
	}

	.linage {
	  fill: none;
	  stroke: #000;
	}

	.marriage {
	  fill: none;
	  stroke: black;
	}

	.man {
	  background-color: lightblue;
	  border-style: solid;
	  border-width: 1px;
	  box-sizing: border-box;
	}

	.woman {
	  background-color: pink;
	  border-style: solid;
	  border-width: 1px;
	  box-sizing: border-box;
	}

	.emphasis {
	  font-style: italic;
	}

	p {
	  padding: 0;
	  margin: 0;
	}

	svg {
	  border-style: solid;
	  border-width: 1px;
	}