马萨诸塞州地图在d3中没有显示其中的县

Question

function createVis(errors, mapData, spendingData) {
var length = (mapData.features.length)-1;    
var width = 700;
var height = 580;
var svg = d3.select("body").append("svg").attr("width",width).attr("height", 
height);
var g = svg.append("g");

var projection = d3.geoConicConformal().scale(10000).parallels([41 + 17 / 
60, 41 + 29 / 60]).rotate([70 + 30 / 60, 0]).translate([600, 
320]).center([0, 41.313]);

var geoPath = d3.geoPath().projection(projection);

    g.selectAll("path")
    .data(mapData.features)
    .enter()
    .append("path")
    .attr("fill", "#ff4500")
    .attr("stroke", "#000000").
    attr("d", geoPath);

    }

这是我的代码，我的数据如下：

{
"type": "FeatureCollection",
"name": "SCHOOLDISTRICTS_POLY",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ORG_CODE": "08280000", "DISTRICT": "Greater Lowell", "MADISTTYPE": "Regional Vocational Technical", "TOWN_REG": "REGIONAL", "STARTGRADE": "9", "ENDGRADE": "12", "SHAPE_AREA": 183340893.146, "SHAPE_LEN": 81197.948086200005 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.255132443929881, 42.73647401089648 ], [ -71.238178798293632, 42.669419453899359 ], [ -71.256187892779593, 42.657145166389917 ], [ -71.275154586332562, 42.65621644091356 ], [ -71.271188032661229, 42.644241513107872 ], [ -71.283427931805434, 42.615299997131757 ], [ -71.31930983289854, 42.613572526588307 ], [ -71.31989722336931, 42.606900823786113 ], [ -71.359942889463611, 42.625971844090664 ], [ -71.380686660171804, 42.648913650788081 ], [ -71.398995607356738, 42.652467306292387 ], [ -71.398890239389331, 42.644949295840014 ], [ -71.417642263054788, 42.653774259235455 ], [ -71.493527614175989, 42.617403520281393 ], [ -71.496484694790936, 42.649802940881621 ], [ -71.514968843946718, 42.643622718167784 ], [ -71.53441392920378, 42.648414608892729 ], [ -71.532408146338923, 42.668978233475208 ], [ -71.557414123221093, 42.676313626336444 ], [ -71.542436667347644, 42.702804614490802 ], [ -71.294870530970343, 42.697243338711019 ], [ -71.255132443929881, 42.73647401089648 ] ] ] } },
{ "type": "Feature", "properties": { "ORG_CODE": "08230000", "DISTRICT": "Greater Lawrence", "MADISTTYPE": "Regional Vocational Technical", "TOWN_REG": "REGIONAL", "STARTGRADE": "9", "ENDGRADE": "12", "SHAPE_AREA": 233855647.47099999, "SHAPE_LEN": 74299.8765288 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.114400587200862, 42.740129766717118 ], [ -71.040519483804715, 42.672687761947358 ], [ -71.022309620720165, 42.641636185283097 ], [ -71.054557785237776, 42.627652286486381 ], [ -71.058766177820033, 42.609077177266343 ], [ -71.135405198509417, 42.599079552340889 ], [ -71.154419482450422, 42.615267949580215 ], [ -71.164878523405847, 42.598021163816156 ], [ -71.182046196216064, 42.608446462192617 ], [ -71.171755925471757, 42.616545623433943 ], [ -71.256187892779593, 42.657145166389917 ], [ -71.238178798293632, 42.669419453899359 ], [ -71.255132443929881, 42.73647401089648 ], [ -71.223825731175651, 42.746486059440002 ], [ -71.181786155884325, 42.737341386734691 ], [ -71.182398057854201, 42.794329603021914 ], [ -71.130565074650804, 42.760751689240472 ], [ -71.114400587200862, 42.740129766717118 ] ] ] } },
{ "type": "Feature", "properties": { "ORG_CODE": "08050000", "DISTRICT": "Blackstone Valley", "MADISTTYPE": "Regional Vocational Technical", "TOWN_REG": "REGIONAL", "STARTGRADE": "9", "ENDGRADE": "12", "SHAPE_AREA": 661502879.97000003, "SHAPE_LEN": 116533.596546 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.674171757034856, 42.248590738019871 ], [ -71.650161498976374, 42.247791654310511 ], [ -71.644427357674218, 42.226626916611536 ], [ -71.621109872583972, 42.230868211504713 ], [ -71.599317787389609, 42.225959169161314 ], [ -71.602221146931029, 42.218101467011344 ], [ -71.582910569270638, 42.19555960086273 ], [ -71.556781683922011, 42.192450091473994 ], [ -71.555737563339704, 42.1825031786829 ], [ -71.502630265569763, 42.191413366176555 ], [ -71.497378082864216, 42.166642952706297 ], [ -71.478027457313758, 42.165870750276255 ], [ -71.478522477773666, 42.13137789839508 ], [ -71.441791667798881, 42.135231268493953 ], [ -71.458116158718354, 42.017852324644025 ], [ -71.79918763415759, 42.008053340823544 ], [ -71.830063886806272, 42.092777977411089 ], [ -71.797176835169878, 42.099171862669913 ], [ -71.8179527531221, 42.133265502868504 ], [ -71.829530455461665, 42.129390662327502 ], [ -71.824852663826263, 42.155332124555144 ], [ -71.83410521586049, 42.154990238577142 ], [ -71.825485424224823, 42.159920520690811 ], [ -71.831504222841104, 42.164253168060533 ], [ -71.79714018846586, 42.210039684592466 ], [ -71.731237079193022, 42.24128620665789 ], [ -71.674171757034856, 42.248590738019871 ] ] ] } }

这只是数据的一部分。我的JSON文件有更多数据。根据上面的代码，我可以获得马萨诸塞州的州地图，但是我无法看到其中的县的边界。任何人都可以帮我修改我的代码，以便能够看到县的边界吗？

This is expected But I am getting this

Answer 1

图表包含您需要的所有数据，它只是不可见。如果您更改＆＃34;填写＆＃34;属性为＆＃34;无＆＃34;。你可以看到它：

g.selectAll("path")
.data(mapData.features)
.enter()
.append("path")
.attr("fill", "#ff4500")
.attr("stroke", "#000000")
.attr("d", geoPath)

变化

g.selectAll("path")
.data(mapData.features)
.enter()
.append("path")
.attr("fill", "none")       //   <--HERE
.attr("stroke", "#000000")
.attr("d", geoPath)

或更好地改变不透明度，以便您可以看到问题所在：

g.selectAll("path")
.data(mapData.features)
.enter()
.append("path")
.attr("fill", "#ff45000A")       //   <--HERE #RRGGBBAA AA=alpha
.attr("stroke", "#000000")
.attr("d", geoPath)

更暗的颜色..更多重叠的多边形

根据它出现的D3绘制路径。

即。移动＆＃34; Hilltown合作宪章公共＆＃34;特征，在第一个位置（此时它的第396个）和其他区域。基本上恢复他们出现的顺序.-

＆＃13;

＆＃13;

d3.queue()
	.defer(d3.json, "https://cdn.rawgit.com/dakoop/e3d0b2100c6b6774554dddb0947f2b67/raw/ea38ad2f7949fb5c2242fa1571c9ea12140f2a76/ma-school-districts-500.geojson")
  //.defer(d3.csv, "https://cdn.rawgit.com/dakoop/e3d0b2100c6b6774554dddb0947f2b67/raw/ea38ad2f7949fb5c2242fa1571c9ea12140f2a76/ma-school-funding.csv")
  .await(createVis);

function createVis(errors, mapData, spendingData) {
var length = (mapData.features.length)-1;    
var width = 700;
var height = 580;
var svg = d3.select("body").append("svg").attr("width",width).attr("height", 
height);
var g = svg.append("g");

var projection = d3.geoConicConformal().scale(10000).parallels([41 + 17 / 
60, 41 + 29 / 60]).rotate([70 + 30 / 60, 0]).translate([600, 
320]).center([0, 41.313]);

var geoPath = d3.geoPath().projection(projection);

    g.selectAll("path")
    .data(mapData.features)
    .enter()
    .append("path")
    .attr("fill", "#ff45001F")
    .attr("stroke", "#000000")
    .attr("d", geoPath)
    .attr("id",function(d){return d.properties.ORG_CODE;});

    }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

<强>解

使用无填充和虚线笔划绘制县，使用ma-school-funding.csv绘制颜色范围的区域，无中风.-