Проблема:Как я могу вложить геометрию GeoJSON/TopoJSON ИЛИ вложить сгенерированные пути с помощью D3?
Я пытаюсь создать интерактивную карту США, в которой отображаются государственные, уездные и национальные границы. Границы затенены на основе данных, а зависание над состоянием должно выделять все округа в состоянии, а состояние должно быть кликабельным. Я хочу достичь этого, имея 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-слияние в командной строке, чтобы объединить графства в государственные формы, а затем сделать государственные формы отдельно - это помогает с наличием отдельных государственных границ - но я не придумали способ вложить графства в соответствующие формы состояния.
Что я работаю прямо сейчас:
Каким-то образом комбинируя файл состояния TopoJSON и файл округа TopoJSON и гнездования округов в штатах, то рендеринг с D3.
Как-то используя d3, чтобы принимать не вложенные данные состояния и графства и просто вложить его на клиентском компьютере на уровне клиента.
В конце концов, я хотел бы узнать о наиболее эффективном и быстром процессе рендеринга для достижения желаемой функциональности.
Спасибо за вашу помощь заранее.
Возможно, мне что-то не хватает, но вы можете просто взять данные о графствах, а для исходного цвета - все графства в состоянии (и их границах) одного цвета? –
Возможно, вы могли бы использовать свойства в вашем файле topojson для сопоставления округов с состояниями, к которым они принадлежат. то есть. имеют свойство 'state' в каждом графстве, которое идентифицировало состояние, в котором они были, это позволит вам выбрать все соответствующие округа при зависании состояния. Я не совсем понимаю, чего вы пытаетесь достичь, кроме того, что выделяют округа при наведении штата. Если это так, то то, что я предложил, должно быть выполнимым. Где вы находите свои шейп-файлы округа, и имеет ли он состояние, в котором каждый округ принадлежит существующему имуществу, которое можно повторно использовать? –