JSFiddle - React, Tailwind, and code Playground

by helxsz

HTML

<script src="&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&quot;&gt;&lt;/script&gt;"></script>
<body>
    <button onclick="getValue()"> biger </button>
    <svg></svg>
</body>

JavaScript

var width = 960;
    var height = 960;
    
    var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

    var scale_para = 20000;

function getValue(){
    scale_para = 40000;
    show();
    console.log('click and show');
}

function show(){
    console.log('show');
    var projection = d3.geo
	    .mercator()
	    .scale(scale_para)	
	    .translate([width/2,height/2])
	    .center([139.0032936, 36.3219088]); 

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

    var pointdata = {"type": "LineString", "coordinates": [
	    [139.013057, 36.322356], 
	    [139.073177, 36.383191], 
	    [139.19382500000006, 36.32668100000001], 
	    [139.0441608,36.6460769], 
	    [138.6388879,36.5314431], 
	    [138.59605290000002,36.6207784], 
	    [139.13282479999998,36.8052796], 
	    [139.33068750000007,36.4054907]
	    
    ]}
    
    var line = svg.selectAll(".line")
	    .data([pointdata])
	    .enter()
	    .append("path")
	    .attr({
		    "class":"line",
		    "d": path,
		    "fill": "none",
		    "stroke": "black",
		    "stroke-width": 1.5
	    });
	    
    var point = svg.selectAll(".point")
	    .data(pointdata.coordinates)
	    .enter()
	    .append("circle")
	    .attr({
		    "cx":function(d) { return projection(d)[0]; },
		    "cy":function(d) { return projection(d)[1]; },
		    "r":4,
		    fill:"black",
		    "fill-opacity":1
	    });

}

show();

setTimeout(function(){
    scale_para = 40000;
    show();
    console.log('click and show')
},3000);