biovisualize/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Parse and append an HTML or SVG string. I use it a lot for appending a template, instead of generating it with d3.
d3.select('.container').appendHTML('<div><svg><g><rect width="50" height="50" /></g></svg></div>');
Unlike using .html, .appendHTML can append multiple elements
d3.select('.container').html('<span id="a"></span>');
d3.select('.container').html('<span id="b"></span>'); // will replace content
d3.select('.container').appendHTML('<span id="c"></span>'); // will append content
You can append HTML or SVG using the right method
var svg = d3.select('.container')
    .appendHTML('<svg xmlns="http://www.w3.org/2000/svg"><g><circle class="circle1" cx="50" cy="50" r="50"></circle></g></svg>')
    .select('g');

svg.appendSVG('<circle class="circle2" cx="20" cy="20" r="20"></circle>');
svg.appendSVG('<rect width="30" height="30"></rect>');
And it can be used with the enter/update/exit pattern
d3.select('.container').selectAll('div.test')
    .data([0, 1, 2])
  .enter().appendHTML('<div class="test"><p></p></div>')
    .select('p')
    .text(function(d){ return d; });

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.js"></script>
    <style>
        div, svg {
            border: 1px solid silver;
            margin: 10px;
        }
        rect {
            fill: skyblue;
        }
        .circle1 {
            fill: orange;
        }
        .circle2 {
            fill: lime;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <script>

    d3.selection.prototype.appendHTML =
    d3.selection.enter.prototype.appendHTML = function(HTMLString) {
        return this.select(function() {
            return this.appendChild(document.importNode(new DOMParser().parseFromString(HTMLString, 'text/html').body.childNodes[0], true));
        });
    };

    d3.selection.prototype.appendSVG =
    d3.selection.enter.prototype.appendSVG = function(SVGString) {
        return this.select(function() {
            return this.appendChild(document.importNode(new DOMParser()
            .parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + SVGString + '</svg>', 'application/xml').documentElement.firstChild, true));
        });
    };

    d3.select('.container').appendHTML('<svg><g><rect width="50" height="50" /></g></svg>');

    var svg = d3.select('.container')
        .appendHTML('<svg xmlns="http://www.w3.org/2000/svg"><g><circle class="circle1" cx="50" cy="50" r="50"></circle></g></svg>')
        .select('g');

    svg.appendSVG('<circle class="circle2" cx="20" cy="20" r="20"></circle>');
    svg.appendSVG('<rect width="30" height="30"></rect>');

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.js"></script>
	<style>
	div, svg {
	border: 1px solid silver;
	margin: 10px;
	}
	rect {
	fill: skyblue;
	}
	.circle1 {
	fill: orange;
	}
	.circle2 {
	fill: lime;
	}
	</style>
	</head>
	<body>
	<div class="container"></div>
	<script>

	d3.selection.prototype.appendHTML =
	d3.selection.enter.prototype.appendHTML = function(HTMLString) {
	return this.select(function() {
	return this.appendChild(document.importNode(new DOMParser().parseFromString(HTMLString, 'text/html').body.childNodes[0], true));
	});
	};

	d3.selection.prototype.appendSVG =
	d3.selection.enter.prototype.appendSVG = function(SVGString) {
	return this.select(function() {
	return this.appendChild(document.importNode(new DOMParser()
	.parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + SVGString + '</svg>', 'application/xml').documentElement.firstChild, true));
	});
	};

	d3.select('.container').appendHTML('<svg><g><rect width="50" height="50" /></g></svg>');

	var svg = d3.select('.container')
	.appendHTML('<svg xmlns="http://www.w3.org/2000/svg"><g><circle class="circle1" cx="50" cy="50" r="50"></circle></g></svg>')
	.select('g');

	svg.appendSVG('<circle class="circle2" cx="20" cy="20" r="20"></circle>');
	svg.appendSVG('<rect width="30" height="30"></rect>');

	</script>
	</body>
	</html>