javascript - Add new path to an existing map in D3 -

i have created world map using d3. using d3 library , topojson library it's creation.

now, want draw path of county named "turkana" in "kenya".for appending new path retrieved geojson data of "turkana" county existing path of worldmap. below

g.selectall("path")   .data(countries)   .enter().append("path")   .attr("d", path)   .attr("class", "feature")   .on("click", clicked);  g.selectall("path")   .data(geojsonkenyaturkana.features)   .enter().append("path")   .attr("d",path)   .attr("class", "feature"); 

but nothing seems happening. mean path of turkana county not drawn. appreciated.

i have created plunker current working code.

your problem not using enter method correctly. when add countries, use selection:

g.selectall("path")

as there no paths yet, empty selection. in general, when assign data selection , use enter() selection, enter selection holds features need created. in case, have no features in initial selection; therefore, using .enter().append() create 1 feature each item in data array. works great first time when appending countries.

the second time use same selection (when trying add county), time selection not empty - selecting paths made (one each country). enter selection empty, no new features need made, updating data first path created.

this visible if comment 2 lines in code:

g.selectall("path")     .data(geojsonkenyaturkana.features)     //.enter().append("path")     .attr("d",path)     //.attr("class", "feature"); 

shown in example using map, can see county data replaced datum canada (you can't see new datum canada(now turkana) because behind kenya since appended before kenya in initial append).

to make approach work need use null selection, use d3.selectall(null) or d3.selectall(".classdoesnotexistyet") (the latter option slower) etc. if selection empty, items in data array need appended in enter selection. see plunker of code intended (i removed mesh reduced visibility of county demo).