0
我设置一个例子来说明这个问题的我遇到：D3.js问题过滤topojson数据
简言之，我使用D3渲染图的美国。我附加了相关的数据属性来处理点击事件并确定哪个状态被点击。
在下面点击事件被预制：
我抓住了美国的县topojson文件（其中包含所有美国 县）。
从数据中删除不相关的县，并将它们呈现在点击状态的 地图上。
我似乎无法弄清楚幕后发生了什么，导致一些县被绘制而其他人被忽略。
当我记录从过滤列表返回的数据时，我显示的是精确的县数，但它们只是部分绘制在地图上。有些州不返回任何。 宾夕法尼亚州和德克萨斯州部分工作。
我检查了数据和比较操作，但我认为这可能与弧属性不匹配。
如果我利用县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