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