Проблема:
Я пытаюсь создать интерактивную карту США, на которой отображаются границы штата, округа и страны. Округа заштрихованы на основе данных, и при наведении указателя мыши на штат должны быть выделены все округа в штате, а штат должен быть кликабельным. Я хочу добиться этого, имея SVG с фигурами округов внутри фигур штатов, внутри фигур США.
Я могу сгенерировать карту округа на основе файла формы округа CENSUS и заштриховать штаты на основе данных во внешнем CSV-файле, подготовив файл с помощью командной строки TopoJSON и используя следующий код в D3:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke-linejoin: round;
stroke-linecap: 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 width = 960,
height = 600;
var path = d3.geo.path()
.projection(d3.geo.albersUsa());
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("counties_pa.json", function(error, us) {
if (error) return console.error(error);
var color = d3.scale.threshold()
.domain([1, 10, 50, 100, 500, 1000, 2000, 5000])
.range(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"]);
svg.append('g').attr('class','counties').selectAll("path").data(topojson.feature(us, us.objects.cb_2014_us_county_20m).features).enter().append('path').attr('d',path).attr('style',function(d){return 'fill:'+color(d.properties.population / d.properties.area * 2.58999e6);});
});
</script>Это в основном визуально приемлемо (за исключением того, что у него нет отдельных государственных/национальных границ), но функционально неадекватно. Чтобы применить CSS к округам при наведении курсора на штат, округа должны быть внутри формы штата или каким-то образом сгруппированы.
Что я пробовал:
- Использование topojson-merge в командной строке для объединения округов в фигуры штатов, а затем рендеринга фигур штатов по отдельности — это помогает иметь дискретные границы штатов — но я не нашел способа вложить округа в соответствующие фигуры штатов.
Чем я занимаюсь сейчас:
Каким-то образом объединив файл TopoJSON штата и файл TopoJSON округа и вложив округа в штаты, а затем отобразив их с помощью D3.
Каким-то образом используя d3, чтобы взять не вложенные данные о состоянии и округе и просто вложить их в клиент на уровне клиента.
В конце я хотел бы узнать о наиболее эффективном и быстром процессе рендеринга для достижения желаемой функциональности.
Заранее благодарны за Вашу помощь.
stateдля каждого округа, которое идентифицирует штат, к которому они принадлежат, это позволит вам выбрать все подходящие округа при наведении курсора на штат. Я не очень понимаю, чего вы пытаетесь достичь, кроме как выделить округа при наведении курсора. Если это так, то то, что я предложил, должно быть выполнимо. Откуда вы берете шейп-файлы округов, и есть ли в них состояние, которому принадлежит каждый округ, в существующем свойстве, которое вы можете использовать повторно? - person Ben Lyall schedule 15.06.2015