D3.js过滤topojson数据时出现问题

Question

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

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

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

我正在抓取美国县topojson文件（其中包含所有美国县）。
从数据中删除不相关的县，并将其呈现在单击状态的地图上。

我似乎无法弄清楚在幕后发生了什么事，导致某些县被划出，而另一些县则被忽略了。

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

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

如果我使用Counties 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>

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 个解决方案

解决方案1
0 2015-05-25 01:22:01

D3.js过滤topojson数据时出现问题

问题描述

1 个解决方案

解决方案1 0 2015-05-25 01:22:01

解决方案1
0 2015-05-25 01:22:01