I am currently attempting to update the data source for a TopoJson map so that the points on the map get replotted when a button is pressed / updateData() function is called.
Here is my code:
<head>
<script src="js/d3.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
</style>
</head>
<body>
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()" />
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("data/world-110m2.json", function(error, topology) {
// load and display the cities
d3.json("data/commodities3.json", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.location_lon, d.location_lat])[0];})
.attr("cy", function(d) {
return projection([d.location_lon, d.location_lat])[1];})
.style("fill", function(d){
if(d.commodity_text == "Tin") {
return "blue";
} else {
return "red";
}
})
.attr("r", function(d){
if(d.commodity_text == "Iron") {
return 10;
} else {
return 4;
}
});
});
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
function updateData(){
var g = svg.append("g").transition();
d3.json("data/commodities3.json", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.location_lon, d.location_lat])[0];})
.attr("cy", function(d) {
return projection([d.location_lon, d.location_lat])[1];})
.style("fill", function(d){
if(d.commodity_text == "Tin") {
return "blue";
} else {
return "red";
}
})
.attr("r", function(d){
if(d.commodity_text == "Iron") {
return 10;
} else {
return 4;
}
});
});
}
</script>
</body>
</html>
Currently I am calling my transition function on my variable 'g', but I am not sure where to progress from here. Any help would be very appreciated. Thank you.
