<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../d3.js"></script>
<script>
var width = 960,
    height = 960;
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
var context=canvas.node().getContext("2d"); 
var projection = d3.geo.mercator()
						.center([120, 35])
						.scale(540);
						
var path = d3.geo.path()
				.projection(projection)
				.context(context);

d3.json("china.json", function(error, china) {
	canvas.selectAll("path")
		.data( china.features )
		.enter()
		.append("path")
		.attr("d",path);
	context.stroke();
	context.fillStyle='steelblue';
	context.fill();
});

//添加南海诸岛示意图
//此图截自Echarts：http://echarts.baidu.com/doc/example/map9.html
var img = new Image();  
	img.src = "southchinasea.png";  
	img.onload = function() {  
		context.drawImage(img, 550, 350, 50, 70);  
	} 
</script>

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../d3.js"></script>
<script>
var width = 960,
    height = 960;
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
var context=canvas.node().getContext("2d"); 
var projection = d3.geo.mercator()
						.center([120, 35])
						.scale(540);
						
var path = d3.geo.path()
				.projection(projection)
				.context(context);

var color = d3.scale.category20();

d3.json("china.json", function(error, china) {
	for (var i = china.features.length - 1; i >= 0; i--) {
		context.beginPath();
		path(china.features[i]);
		context.fillStyle = color(i);
		context.fill();
		context.closePath();
	};
	
});

//添加南海诸岛示意图
//此图截自Echarts：http://echarts.baidu.com/doc/example/map9.html
var img = new Image();  
	img.src = "southchinasea.png";  
	img.onload = function() {  
		context.drawImage(img, 550, 350, 50, 70);  
	} 
</script>

Fix map rendered to Canvas
Fix map rendered to Canvas
