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

Était-ce utile?

La 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) {
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top