D3.js问题过滤topojson数据

D3.js Problems Filtering topojson data

本文关键字：topojson 数据 过滤 问题 js D3      更新时间：2023-09-26

我设置了一个示例来演示我遇到的问题:

简而言之，我使用d3来渲染美国地图。我正在添加相关的数据属性来处理单击事件并确定被单击的状态。

在单击事件中执行以下操作:

  • 我正在抓取美国县topojson文件(其中包含所有我们县)。

    从数据中删除不相关的县，并将其呈现在

我似乎弄不明白在幕后发生了什么，导致一些国家被画出来，而另一些国家被忽略了。

当我记录从过滤列表返回的数据时，我显示的是县的准确数量，但它们只是部分绘制在地图上。有些州不返回任何值。宾夕法尼亚州和德克萨斯州部分工作。

我已经检查了数据和比较操作，但我认为这可能与电弧属性不匹配有关。

如果我使用县JSON文件来呈现整个美国地图，它们都存在。

如果有人能帮我解释一下可能发生的事情，那就太好了。

svg {
fill:#cccccc;
height:100%;
width:100%;
}
.subunit{
outline:#000000;
stroke:#FFFFFF;
stroke-width: 1px;
}
.subunit:hover{
	fill:#ffffff;
	stroke:#FFFFFF;
	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]);
	//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);
	function init(){
		$( document ).ready(function() {
	 
			$('.subunit').on('click',function(){
				var stateid = $(this).attr("data-stateid");
				
				function clearStates(stateid){
				
				
						d3.json("http://www.cleanandgreenfuels.org/uscounties2.json.php", function(error, us) {
							
							
							console.log(us);
							console.log("DATA CLICKED ID "+stateid);
						
							test = jQuery.grep(us.objects.counties.geometries, function(n){
								return (n.properties.stateid == stateid);
							});
							us.objects.counties.geometries = test;
							
								console.log(test.length);
							console.log(us.objects.counties.geometries.length);
							
							var test = topojson.feature(us, us.objects.counties).features;
							
							
							console.log(test);
							console.log(test.length);
							
								 svg.selectAll(".subunit")
									.data(test)
									.enter().append("path")
									.attr("class", function(d) { return "subunit"; })
									.attr("d", path)
									.attr("data-countyid", function(r){ return r.id; });
							
						});
					
					
				}
				
				clearStates(stateid);
			});
			
			
			
	 
		});
	}
 
      
 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>

看起来好像我试图利用一些过时的功能，使用topojson.mesh和.datum()添加新数据已经解决了这个问题，但是引入了一个新的错误。

现在看来，如果渲染的多边形必须按顺序正确绘制这种方式。

我认为应该清理数据，以优化d3的设计功能，但我仍然想知道更多关于它是如何渲染从数据集获得的信息。

function clearStates(stateid){

                        d3.json("http://www.cleanandgreenfuels.org/uscounties2.json.php", function(error, us) {

                            console.log(us);
                            console.log("DATA CLICKED ID "+stateid);
                            test = jQuery.grep(us.objects.counties.geometries, function(n){
                                return (n.properties.stateid == stateid);
                            });
                            us.objects.counties.geometries = test;
                                console.log(test.length);
                            console.log(us.objects.counties.geometries.length);
                            **var test = topojson.mesh(us, us.objects.counties);**

                            console.log(test);
                            console.log(test.length);
                                 **svg.append("path")
                                    .datum(test)
                                    .attr("class", function(d) { return "subunit"; })
                                    .attr("d", path)
                                    .attr("data-countyid", function(r){ return r.id; });**
                        });

                }
相关文章：