Переключайтесь между двумя json слоями карты с помощью события click в d3. js? - PullRequest
Новая
       10

Переключайтесь между двумя json слоями карты с помощью события click в d3. js?

0 голосов
/ 06 апреля 2020

Я пытаюсь визуализировать ВВП по штатам и округам США, используя библиотеку d3. js. У меня есть два json файла со всеми соответствующими данными: states.json и counties.json. Оба файла имеют одинаковую проекцию и прекрасно воспроизводятся при вызове по отдельности.

Я пытаюсь переключаться между двумя файлами с помощью события нажатия кнопки в d3. js, но я новичок в javascript, и я возникли проблемы с поиском наиболее эффективного способа сделать это. Ниже javascript я использую. Обратите внимание, что в настоящее время скрипт отображает файл states.json, так как он вызывается повсюду. (Поэтому я задаю этот вопрос - я бы хотел иметь возможность программно переключаться между файлами states и counties!)

Суть моего вопроса : Как эффективно запрограммировать событие щелчка, чтобы пользователь мог переключаться между просмотром карты ВВП штатов и карты ВВП округов, используя d3. js?

Заранее благодарен за любые предложения . 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
</head>

<body>
<div class="map-div">

<div id="buttons"> <!-- Buttons for the event. -->
<button id="states-button">States</button>
<button id="counties-button">Counties</button>
</div>

<script type="text/javascript">

var width = 600;
var height = 700;

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

Promise.all([
    d3.json("states.json"),
    d3.json("counties.json")
])
.then(function(data){

var conus = topojson.feature(data[0], {
    type:"GeometryCollection",
    geometries: data[0].objects.states.geometries
});

var projection = d3.geo.albersUsa()
            .translate([width/2, height/2]) 
            .scale([1000]);

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

var states_map = d3.map();

var colorScale = d3.scaleQuantize([1, 10], d3.schemeBlues[9])

map.selectAll("path")
    .data(topojson.feature(data[0], data[0].objects.states).features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "map-border")
    .attr("fill", function(d) {return colorScale(d.properties.gdp);})       
});
</script>
</div>
</body>
...