Finally, I got how to create a ZoomableCanvasMap with a custom projection.
Currently, only the latest spam.js at the master branch supports the
parameters.map.settings()function.
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="rbush.min.js"></script>
<script src="spam.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicEquidistantJapan.min.js"></script>
<script type='text/javascript'>
var hover = null
d3.json("empty.json", function(error, d) {
topojson.presimplify(d);
var map = new ZoomableCanvasMap({
element: "body",
width: 960,
height: 500,
projection: d3.geo.conicEquidistantJapan(),
data: [
{
features: topojson.feature(d, d.objects["japan"]),
static: {
paintfeature: function(parameters, d) {
parameters.context.lineWidth = 1 / parameters.scale
parameters.context.strokeStyle = "#555"
parameters.context.stroke()
parameters.context.fillStyle = "#f4efec"
parameters.context.fill()
},
postpaint: function(parameters) {
parameters.context.beginPath()
parameters.context.moveTo(0,0);
parameters.context.lineTo(300,150);
var p = new Path2D(parameters.map.settings().projection.getCompositionBorders())
parameters.context.strokeStyle = "#555"
parameters.context.stroke(p)
}
},
dynamic: {
postpaint: function(parameters) {
if (!hover)
return
parameters.context.beginPath()
parameters.context.lineWidth = 2 / parameters.scale
parameters.context.fillStyle = "rgb(241, 205, 151)"
parameters.path(hover)
parameters.context.stroke()
parameters.context.fill()
}
},
events: {
hover: function(parameters, d) {
hover = d
parameters.map.paint()
},
click: function(parameters, d) {
parameters.map.zoom(d)
}
}
}
]
})
map.init()
})
</script>