Question

我已经设置了一个示例来演示我遇到过的问题：

简而言之，我使用d3来渲染美国的地图。我附加相关数据属性来处理点击事件并确定点击了哪个州。

在点击事件中，执行以下操作：

我抓住美国县拓扑文件（包含所有美国版）县）。

从数据中删除不相关的县并在其上呈现它们被点击的州的地图。

我无法弄清楚幕后发生的事情是什么导致一些县被吸引而其他县被忽略。

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

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

如果我利用Counties JSON文件渲染美国的整个地图，他们都会出现。

如果有人能够帮助阐明可能发生的事情，那就太棒了。

＆＃13;

svg {
fill:#cccccc;
height:100%;
width:100%;
}
.subunit{
outline:#000000;
stroke:#FFFFFF;
stroke-width: 1px;
}
.subunit:hover{
	fill:#ffffff;
	stroke:#FFFFFF;
	stroke-width="10";
}

＆＃13;

<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>

＆＃13;

Answer 1

好像我试图利用一些过时的功能，使用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; });** }); }

D3.js问题过滤topojson数据

1 个答案: