я установки пример, чтобы продемонстрировать вопрос-х я столкнулся:D3.js Проблемы Фильтрация данных topojson
Чтобы быть кратким, я использую d3, чтобы сделать карту Соединенных Штатов. Я добавляю соответствующие атрибуты данных для обработки событий кликов и определения того, какое состояние было нажато.
по щелчку событий следующих предварительно формуют:
Я захватывая topojson файл округа США (который содержит все американские графств).
Извлечение нерелевантных округов из данных и их отображение на карте состояния, которая была нажата.
Я не могу показаться, чтобы выяснить, что происходит за кулисами, которые вызывают некоторые из округов, который можно сделать в то время как другие игнорируются.
Когда я регистрирую данные, которые возвращаются из отфильтрованного списка, я показываю точное количество округов, но они только частично нарисованы на карте. Некоторые штаты не возвращают. Pennsylvania и Texas частично работаю.
Я проверил данные и операции сравнения, но я думаю, что это может быть связано с несоответствием свойств дуг.
Если я использую файл counties JSON для отображения всей карты Соединенных Штатов, все они присутствуют.
Если кто-то может помочь пролить свет на то, что может произойти, это было бы здорово.
svg {
fill:#cccccc;
height:100%;
width:100%;
}
.subunit{
outline:#000000;
stroke:#FFFFFF;
stroke-width: 1px;
}
.subunit:hover{
\t fill:#ffffff;
\t stroke:#FFFFFF;
\t stroke-width="10";
}<body>
<script src="http://www.cleanandgreenfuels.org/jquery-1.11.3.min.js"></script>
<script src="http://www.cleanandgreenfuels.org/d3.v3.min.js"></script>
<script src="http://www.cleanandgreenfuels.org/topojson.v1.min.js"></script>
<script>
var width = window.innerWidth;
height = window.innerHeight;
var projection = d3.geo.albers()
.scale(1500)
.translate([width/2, height/2]);
\t //d3.geo.transverseMercator()
//.rotate([77 + 45/60, -39 - 20/60]);
//.rotate([77+45/60,-40-10/60])
//.scale(500)
//.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width+"px")
.attr("height", height+"px");
d3.json("http://www.cleanandgreenfuels.org/usstates2.json.php", function(error, us, init) {
//svg.append("path")
// .datum(topojson.feature(us, us.objects.counties))
//.attr("d", path);
\t function init(){
\t \t $(document).ready(function() {
\t
\t \t \t $('.subunit').on('click',function(){
\t \t \t \t var stateid = $(this).attr("data-stateid");
\t \t \t \t
\t \t \t \t function clearStates(stateid){
\t \t \t \t
\t \t \t \t
\t \t \t \t \t \t d3.json("http://www.cleanandgreenfuels.org/uscounties2.json.php", function(error, us) {
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t console.log(us);
\t \t \t \t \t \t \t console.log("DATA CLICKED ID "+stateid);
\t \t \t \t \t \t
\t \t \t \t \t \t \t test = jQuery.grep(us.objects.counties.geometries, function(n){
\t \t \t \t \t \t \t \t return (n.properties.stateid == stateid);
\t \t \t \t \t \t \t });
\t \t \t \t \t \t \t us.objects.counties.geometries = test;
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t console.log(test.length);
\t \t \t \t \t \t \t console.log(us.objects.counties.geometries.length);
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t var test = topojson.feature(us, us.objects.counties).features;
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t console.log(test);
\t \t \t \t \t \t \t console.log(test.length);
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t svg.selectAll(".subunit")
\t \t \t \t \t \t \t \t \t .data(test)
\t \t \t \t \t \t \t \t \t .enter().append("path")
\t \t \t \t \t \t \t \t \t .attr("class", function(d) { return "subunit"; })
\t \t \t \t \t \t \t \t \t .attr("d", path)
\t \t \t \t \t \t \t \t \t .attr("data-countyid", function(r){ return r.id; });
\t \t \t \t \t \t \t
\t \t \t \t \t \t });
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t clearStates(stateid);
\t \t \t });
\t \t \t
\t \t \t
\t \t \t
\t
\t \t });
\t }
svg.selectAll(".subunit")
.data(topojson.feature(us, us.objects.us).features)
.enter().append("path")
.attr("class", function(d) { return "subunit"; })
.attr("d", path)
.attr("data-stateid", function(r){ return r.id; });
init();
});
</script>
</body>
Я нашел этот ресурс http://bl.ocks.org/mbostock/4108203, который, как представляется, обеспечивает лучшую реализацию. Хотя легкое решение состоит в том, чтобы лучше структурировать данные, мне все же интересно узнать, что происходит с приведенным выше примером. – user2355051