xxxxxxxxxx
<head>
<meta charset="utf-8">
<title>map with texture</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<style>
#map {
width:960px;
height:600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
/* --------------------
Variables
-------------------- */
var width = 960,
height = 600;
var projection = d3.geo.mercator()
.scale(1700)
.center([140.102364, 39.718614]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
/* --------------------
Texture
-------------------- */
// Horizontal Lines
svg
.append('defs')
.append('pattern')
.attr('id', 'texture0')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 6)
.attr('height', 6)
.append('path')
.attr('d', 'M 0 0 L 0 10')
.attr('stroke', '#3071B9')
.attr('stroke-width', 2);
// Dots
svg
.append('defs')
.append('pattern')
.attr('id', 'texture1')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 5)
.attr('height', 5)
.append('circle')
.attr('cx', 4)
.attr('cy', 4)
.attr('r', 1)
.attr('fill', '#EA5532');
// Vertical Lines
svg
.append('defs')
.append('pattern')
.attr('id', 'texture2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 6)
.attr('height', 6)
.append('path')
.attr('d', 'M 0 0 L 10 0')
.attr('stroke', '#8FC31F')
.attr('stroke-width', 2);
// Cross Lines
svg
.append('defs')
.append('pattern')
.attr('id', 'texture3')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 8)
.attr('height', 8)
.append('path')
.attr('d', 'M0 0L8 8ZM8 0L0 8Z')
.attr('stroke', '#C48AB2')
.attr('stroke-width', 1);
/* --------------------
Load external data
-------------------- */
queue()
.defer(d3.json, "japan.topojson")
.await(loadReady);
/* --------------------
Drawings
-------------------- */
function loadReady(_error, _topojson) {
if (_error){ console.log(_error); }
var geometries = topojson.feature(_topojson, _topojson.objects.japan).features;
var countries = svg.append("g").selectAll(".prefecture").data(geometries);
countries
.enter().insert("path")
.attr("class", "prefecture")
.attr("d", path)
.style("stroke", "#333")
.style("stroke-width", "0.2px")
.attr('fill', function() {
var _ran = Math.floor( Math.random() * 4 );
return 'url(#texture' + _ran + ')';
});
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js