1
我最近花了很多時間在D3上，並從中獲得了一些非常酷的圖形。但是，我無法改變特定元素被繪製成特定顏色。代碼的一部分，我用D3.js動態風格（）函數與geoJSON數據
svg.selectAll("path")
.data(cta.features.filter(function(d) { return d["geometry"]["type"] == "LineString" }))
.enter()
.append("path")
.attr("d", path);
//.style("color", function(d) { return "#"+cta.features.filter(function(d) { return d["geometry"]["type"] == "LineString" })[properties].route_color});
//.style("color", function(d) { return "#"+d.properties.route_color })
//.style("stroke", function(d) { return "#"+cta.features.properties.route_color });
但JavaScript控制檯是給我任何意外的標記或錯誤「遺漏的類型錯誤：無法讀取的未定義的屬性‘route_color’」。我不能理解JSON結構或如何調用它。
{"type": "FeatureCollection", "features": [{"geometry": {"type": "LineString", "coordinates": [[-87.67289245, 42.01906322], [-87.67232427, 42.01859536], [-87.67177458, 42.01814272], [-87.67142086, 42.01785004], [-87.67078724, 42.01732575], [-87.6703651, 42.01697644], [-87.66988213, 42.0165768], [-87.66909211, 42.01587618], [-87.66769221, 42.01466296], [-87.66718331, 42.0142149], [-87.6668905, 42.01388178], [-87.66663474, 42.01354887], [-87.66629817, 42.01297382], [-87.66612624, 42.01259306], [-87.66605557, 42.01226813], [-87.66601382, 42.01183289], [-87.66597127, 42.0105898], [-87.66590909, 42.00836182], [-87.6658316, 42.00686606], [-87.66576971, 42.00618445], [-87.66571247, 42.00585967], [-87.6655256, 42.00524967], [-87.66527119, 42.00466526], [-87.6649991, 42.00414785], [-87.66476825, 42.00381535], [-87.66447543, 42.00348006], [-87.66404229, 42.00308129], [-87.6634618, 42.00263791], [-87.66343068, 42.00261784], [-87.66288053, 42.00226521], [-87.66224922, 42.00186888], [-87.66165748, 42.00152497], [-87.66142024, 42.00136677], [-87.6610607, 42.00107336], [-87.66082777, 42.00089935], [-87.66067007, 42.00075584], [-87.6604919, 42.00058923], [-87.66035169, 42.00043663], [-87.66021157, 42.00027483], [-87.66004709, 42.0000853], [-87.65989503, 41.99988663], [-87.65977997, 41.99968818], [-87.65964699, 41.99943444], [-87.65955679, 41.99921774], [-87.65947896, 41.99899652], [-87.65942551, 41.99880303], [-87.65935478, 41.99849446], [-87.65930832, 41.99822283], [-87.65926768, 41.99798342], [-87.65926651, 41.99750968], [-87.65925719, 41.99722447], [-87.65921122, 41.99632273], [-87.65918917, 41.99549012], [-87.65918313, 41.99463461], [-87.65920228, 41.99366426], [-87.65913049, 41.99235303], [-87.65908078, 41.99083188], [-87.65907586, 41.99025949], [-87.65901441, 41.98881187], [-87.65898335, 41.98760155], [-87.65887359, 41.98450197], [-87.65884028, 41.98350423], [-87.65879205, 41.98184409], [-87.65875047, 41.98059282], [-87.65871639, 41.97966866], [-87.65866842, 41.97798399], [-87.65858793, 41.97522799], [-87.65852996, 41.97345332], [-87.65848822, 41.97117997], [-87.65849296, 41.96913894], [-87.65846557, 41.96837614], [-87.65842209, 41.96745896], [-87.65838428, 41.9668815], [-87.65835859, 41.96669002], [-87.65831898, 41.96650363], [-87.65819034, 41.96621846], [-87.65802133, 41.96581929], [-87.65758751, 41.96427269], [-87.65756347, 41.96397046], [-87.65699866, 41.96181419], [-87.65689009, 41.95861071], [-87.65683673, 41.95692259], [-87.65676903, 41.95490657], [-87.65673866, 41.95441024], [-87.65673984, 41.9542995], [-87.65671751, 41.95416647], [-87.65664761, 41.95404202], [-87.65656532, 41.95396623], [-87.65646538, 41.95387704], [-87.65634749, 41.95380104], [-87.65623502, 41.95377379], [-87.65606302, 41.95376392], [-87.65557043, 41.95376544], [-87.65492939, 41.95377495], [-87.65430649, 41.95375354], [-87.65407863, 41.95373404], [-87.65393908, 41.95370264], [-87.65385068, 41.95364453], [-87.65378606, 41.95358213], [-87.65373336, 41.95351536], [-87.65369271, 41.95343096], [-87.65368469, 41.95332028], [-87.65367159, 41.95311154], [-87.65362592, 41.95245597], [-87.65366049, 41.95199547], [-87.65365831, 41.95108289], [-87.65364564, 41.95059995], [-87.65363554, 41.94819887], [-87.65362593, 41.947428], [-87.65361976, 41.94689194], [-87.65353484, 41.94538969], [-87.65351486, 41.944477], [-87.6534747, 41.94434829], [-87.65342275, 41.94421066], [-87.65341837, 41.94406445], [-87.65340241, 41.94389158], [-87.653388, 41.94357254], [-87.65336257, 41.9431737], [-87.65337754, 41.94288141], [-87.65339746, 41.94268218], [-87.65342448, 41.94237225], [-87.65345392, 41.94217681], [-87.65344193, 41.94185235], [-87.65342292, 41.94145685], [-87.65339708, 41.94083241], [-87.65338299, 41.93991377], [-87.65338049, 41.93975075], [-87.65337492, 41.93938762], [-87.65336788, 41.93892875], [-87.65336361, 41.93865028], [-87.65332582, 41.93763218], [-87.65330865, 41.93716958], [-87.65327514, 41.93626663], [-87.65326645, 41.9360326], [-87.65323493, 41.93531994], [-87.65321677, 41.9349102], [-87.65319648, 41.93445211], [-87.65313731, 41.93311676], [-87.65313086, 41.9327315], [-87.65309585, 41.93217697], [-87.65307037, 41.93151468], [-87.6530468, 41.93090174], [-87.65302372, 41.93030173], [-87.65299317, 41.9295075], [-87.65296222, 41.92870278], [-87.65295478, 41.92841813], [-87.65293544, 41.92767809], [-87.6529216, 41.92714879], [-87.65289134, 41.92599125], [-87.65287507, 41.92536849], [-87.65286584, 41.92505137], [-87.6528172, 41.92352232], [-87.65275988, 41.9217182], [-87.65274114, 41.92112856], [-87.65264431, 41.91821657], [-87.65263982, 41.91808172], [-87.65262488, 41.91763256], [-87.65260981, 41.91717935], [-87.65254835, 41.91562579], [-87.65250043, 41.91405947], [-87.65249381, 41.91326816], [-87.65249098, 41.91316184], [-87.65248582, 41.91308123], [-87.65242439, 41.91298749], [-87.65235283, 41.91293355], [-87.65140702, 41.91225559], [-87.65069802, 41.91174551], [-87.64917727, 41.91065458], [-87.64785436, 41.90970772], [-87.64554535, 41.90806704], [-87.64068611, 41.90458051], [-87.63993404, 41.90404078], [-87.63971211, 41.90391757], [-87.63950553, 41.90383366], [-87.63925701, 41.90379082], [-87.63895663, 41.90379051], [-87.63698055, 41.90382479], [-87.63447013, 41.9038683], [-87.63141229, 41.90392031], [-87.62907711, 41.90394525], [-87.6289143, 41.90393613], [-87.62880245, 41.903903], [-87.62874488, 41.90387019], [-87.62869478, 41.9038185], [-87.6286665, 41.90375613], [-87.62864241, 41.90364239], [-87.62862013, 41.90316336], [-87.62834794, 41.90212033], [-87.62829735, 41.9002617], [-87.62826415, 41.89913649], [-87.62817635, 41.89667121], [-87.62812919, 41.89562296], [-87.62808817, 41.89411885], [-87.6280395, 41.8923342], [-87.62802126, 41.8916652], [-87.62799534, 41.89071471], [-87.62798932, 41.8896486], [-87.62793498, 41.88783248], [-87.62783085, 41.88596106], [-87.62783518, 41.88574041], [-87.62781338, 41.88480887], [-87.62774837, 41.88321471], [-87.62769646, 41.88074456], [-87.6275961, 41.87815276], [-87.62756582, 41.87687452], [-87.62754332, 41.87592492], [-87.62751165, 41.87471423], [-87.62747912, 41.87403924], [-87.62748716, 41.87305724], [-87.62745665, 41.87189073], [-87.62746905, 41.87076337], [-87.62745141, 41.86921464], [-87.62740238, 41.86736767], [-87.62735946, 41.86575399], [-87.627309, 41.86403659], [-87.62739231, 41.86363282], [-87.62755562, 41.86337346], [-87.62767738, 41.86325419], [-87.62778108, 41.86315569], [-87.62803494, 41.8629643], [-87.62849051, 41.862686], [-87.62934126, 41.86211473], [-87.63017783, 41.86138139], [-87.6305816, 41.86092837], [-87.6309444, 41.86034507], [-87.63101434, 41.86027569], [-87.63112203, 41.86012938], [-87.63120354, 41.85996075], [-87.63129492, 41.85976359], [-87.63136451, 41.85951865], [-87.63141865, 41.85923074], [-87.63143776, 41.85894023], [-87.63144047, 41.8586925], [-87.63141868, 41.85746088], [-87.63136122, 41.85575191], [-87.63127726, 41.85454011], [-87.6311552, 41.85389308], [-87.63106167, 41.85351323], [-87.63096783, 41.8532058], [-87.63090594, 41.85293893], [-87.63084988, 41.85267631], [-87.63082074, 41.85242838], [-87.63073488, 41.8517912], [-87.63068875, 41.85107222], [-87.63068598, 41.84960231], [-87.63072478, 41.84896889], [-87.6308493, 41.8483622], [-87.63101191, 41.84747702], [-87.63108849, 41.84717496], [-87.63114935, 41.84685374], [-87.63117026, 41.84668949], [-87.63120348, 41.84647246], [-87.63127176, 41.84585636], [-87.63127922, 41.84547159], [-87.63125653, 41.84458317], [-87.63113576, 41.84285161], [-87.63103162, 41.84183724], [-87.63093039, 41.84036575], [-87.63086698, 41.83952531], [-87.63081133, 41.8372117], [-87.63074638, 41.83494624], [-87.6306363, 41.83119056], [-87.63055897, 41.82748375], [-87.63050182, 41.82519], [-87.63043612, 41.82268556], [-87.63030896, 41.81768665], [-87.63027912, 41.8164671], [-87.6302518, 41.81524], [-87.6302109, 41.8135075], [-87.6301863, 41.81281083], [-87.63019351, 41.81246736], [-87.63021852, 41.81213836], [-87.63027195, 41.81181867], [-87.63037931, 41.81147236], [-87.63041479, 41.81138476], [-87.63055731, 41.81108602], [-87.6310258, 41.81033813], [-87.63133611, 41.80984756], [-87.63151633, 41.80946726], [-87.63156732, 41.80932982], [-87.63158621, 41.80928602], [-87.63160052, 41.80923962], [-87.63161373, 41.8091889], [-87.63168032, 41.80899215], [-87.63169571, 41.8089535], [-87.63174058, 41.80870039], [-87.63177168, 41.80852951], [-87.63179146, 41.8082989], [-87.63180673, 41.8080458], [-87.6317891, 41.8076823], [-87.63173289, 41.80689865], [-87.6316203, 41.8053475], [-87.63146187, 41.80305314], [-87.63134505, 41.80188958], [-87.6313221, 41.80083727], [-87.63124131, 41.79775373], [-87.63116917, 41.79541826], [-87.63114474, 41.79390167], [-87.63109916, 41.79167244], [-87.63100379, 41.78772181], [-87.63103118, 41.7872155], [-87.63112207, 41.78558225], [-87.63106005, 41.7833598], [-87.63104498, 41.78269984], [-87.63100045, 41.78053433], [-87.63097131, 41.77982223], [-87.63093205, 41.77942143], [-87.6308187, 41.77892332], [-87.63076685, 41.77874209], [-87.63064648, 41.77846821], [-87.63048387, 41.77814855], [-87.63028061, 41.77783233], [-87.63003951, 41.77748916], [-87.62979012, 41.77722884], [-87.62953938, 41.77697955], [-87.62925623, 41.77676967], [-87.62882057, 41.77644189], [-87.62852633, 41.77623286], [-87.62750369, 41.77540883], [-87.62725069, 41.7751435], [-87.62711932, 41.77500638], [-87.62703971, 41.77490569], [-87.62683109, 41.77463179], [-87.62669922, 41.77445046], [-87.62651835, 41.77416052], [-87.62644409, 41.77402081], [-87.62641507, 41.77397422], [-87.62634973, 41.77383014], [-87.62619402, 41.77348878], [-87.62617535, 41.77343263], [-87.62602762, 41.77295726], [-87.62600698, 41.77286429], [-87.6259628, 41.77258625], [-87.62595363, 41.7725243], [-87.62592, 41.77218112], [-87.62589782, 41.77187152], [-87.62584883, 41.77014895], [-87.62580935, 41.76836787], [-87.62569108, 41.76541567], [-87.62567217, 41.76289575], [-87.62557432, 41.75814698], [-87.6255329, 41.75603934], [-87.62549567, 41.75515849], [-87.62537482, 41.75387619], [-87.6253061, 41.7531612], [-87.62525009, 41.75263996], [-87.62520485, 41.75188762], [-87.62519091, 41.75128341], [-87.62517835, 41.75041234], [-87.62499805, 41.74459946], [-87.624967, 41.74302979], [-87.62482283, 41.73948341], [-87.62478388, 41.73613488], [-87.62475307, 41.73537121], [-87.62472177, 41.73448308], [-87.62463427, 41.73211746], [-87.62458408, 41.72904473], [-87.62454371, 41.72800134], [-87.62441475, 41.72237598]]}, "type": "Feature", "properties ": {"route_color": "C60C30", "route_id": "Red"}},
以上是JSON文件。錯誤是否明顯？我有興趣抓住「route_color」，並使d3正在繪製的線的顏色。謝謝。
您也可以將顏色和筆畫設置爲樣式。 –
這是屬性末尾的空間。哎呀 – Jared