D3.js : Draw a new topojson and removing the old one

StackOverflow https://stackoverflow.com/questions/21346207

  •  02-10-2022
  •  | 
  •  

Question

I am new to d3.js, but I could draw a topojson file, centering and calculate the scale (obviously using several questions and answers of stackoverflow). Now, I want to change the topojson displayed, I mean, delete the actual, and load a new one and display it.

I can load the new one, but it is not displayed. Could you help me with error?

<!DOCTYPE html>
<meta charset="utf-8">
<style>


rect {
    fill: none;
    pointer-events: all;
}

    .feature {
        fill: #ccc;
        cursor: pointer;
    }

    .feature.active {
        fill: orange;
    }

    .mesh {
        fill: none;
        stroke: #fff;
        stroke-width: .5px;
        stroke-linejoin: round;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

var width = 960,
    height = 500,
    active;


var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

var g = svg.append("g");



var projection = d3.geo.albers()
    .scale(1)
    .translate([0,0]);

var path = d3.geo.path()
    .projection(projection);

createMap("aguascalientes.topojson");

function createMap(topojsonFile) {
    d3.json(topojsonFile, function(error, tj) {

        console.log(tj);

        for(key in tj.objects) { features = tj.objects[key]; }

        var estados = topojson.feature(tj, features);

        var b = path.bounds(estados);
        var s = 0.95/ Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
        var t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

        projection
            .scale(s)
            .translate(t);

        g.selectAll("path")
            .data(topojson.feature(tj, features).features)
            .enter().append("path")
            .attr("d", path)
            .attr("class", "feature")
            .on("click", click);

        g.append("path")
            .datum(topojson.mesh(tj, features, function(a,b) { return a !== b; }))
            .attr("class", "mesh")
            .attr("d", path);
    });
}


function updateData() {
    console.log("Update");
    svg = d3.select("body").transition();
    createMap("estados.topojson");
}
</script>


<body>
    <div id="option">
    <input name="updateButton"
           type="button"
           value="Update"
           onclick="updateData()"
    />
    </div>
</body>

Thanks in advance

Was it helpful?

Solution

You aren't actually deleting the old one and operating only on the .enter() selection, hence nothing happens. To delete what's there before adding the new paths, do

svg.selectAll("path").remove();

after loading the data, i.e. just after the line

d3.json(topojsonFile, function(error, tj) {
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top