vtiinanen / Xml2Tree

Visualize XML data as a tree.

Xml2Tree

Xml2Tree is a library for visualizing XML data in the browser as a tree using d3.js.

Demo: https://mmaltsev.github.io/Xml2Tree/

Docs: https://mmaltsev.github.io/Xml2Tree/docs/

Install

Add link to the library:

<script src="https://cdn.rawgit.com/mmaltsev/Xml2Tree/master/src/xml2tree.min.js"></script>

Create new div element:

<div class="chart1"></div>

Call function:

<script>
  xmltotree("chart1", "example/example.xml", [], false, false)
</script>

Options

Variable	Type	Description
elementId	string	id of div that contains tree.
filePath	string	Path to the XML file.
secondLevelNodes	array of strings	List of nodes to show on second level of tree. Other will be contained in 'Extra'. If not specified - everything is shown.
isAttributes	boolean	Whether to show all attributes of elements in XML or not.
isJSON	boolean	Specified when input file is JSON.

Examples

You can find an XML file that is used below here.

1 Example Code:

<script>
  var elementId = 'chart1';
  var filePath = 'example/example.xml';
  var secondLevelNodes = [];
  var isAttributes = true;
  var isJSON = false;
		
  xml2tree(elementId, filePath, secondLevelNodes, isAttributes, isJSON);
</script>

1 Example Result:

2 Example Code:

<script>
  var elementId = 'chart1';
  var filePath = 'example/example.xml';
  var secondLevelNodes = ['book'];
  var isAttributes = false;
  var isJSON = false;
		
  xml2tree(elementId, filePath, secondLevelNodes, isAttributes, isJSON);
</script>

2 Example Result:

License.

MIT License. Copyright (c) 2016-2017 Maxim Maltsev.