D3 V6 및 자바 스크립트-GeoJSON 채우기가 경로 외부로 '유출'됨 [중복]

Nov 17 2020

카운티 별 교육 성취도를 보여주는 D3 V6를 사용하여지도를 만듭니다. 로드 된 counties.topojson 및 csvData.csv가 있습니다.

var promises = [];
promises.push(d3.csv("data/csvData.csv")); //load attributes from csv
promises.push(d3.json("data/counties.topojson")); //load background spatial data

Promise.all(promises).then(callback);

및 변수에 할당 된 콜백 함수 csvDatacounties. 은 counties다음 환산하고 있습니다 :

miCounties = topojson.feature(counties, counties.objects.collection).features;

csvData군의 데이터에 가입하고 있음을 확인 조인되는 console.log(joinedCounties)콜백 함수 내에서 setEnumerationUnits()호출 (여기서 colorScale로부터 생성 된 배열에 기초한 퀀 스케일은 csvDatamap은 IS SVG소자 :

function setEnumerationUnits(joinedCounties,map,path,colorScale){
var counties = map.selectAll(".counties")
    .data(joinedCounties)
    .enter()
    .append("path")
    .attr("class", function(d){
        return "counties " + d.properties.NAME;
    })
    .attr("d", path)
    .style("fill", function(d) {
        return choropleth(d.properties, colorScale);
     })

또한 .countiesCSS 의 클래스에 "채우기"를 추가 하면 "유출"이 생성 된다는 점도 언급해야합니다 . QGIS와 Pro에서 모두 정상으로 보이는 topojson을 확인했습니다. 나는 또한 동일한 결과를 가진 두 번째 데이터 소스를 시도했습니다. 결과는 다음과 같습니다.

다음은 스타일링없이 채우기없이 CSS에 정의 된 획만있는 모습입니다.

콘솔에 오류가 없습니다. 누구든지 도와 줄 수있는 모든 도움에 감사드립니다! 감사!

감사합니다! 잔디 되감기가 작동했습니다 !!

다음은 작동하도록 추가 한 것입니다 (잔디 라이브러리를 설치 한 후).

        miCounties.forEach(function(feature){
        feature.geometry = turf.rewind(feature.geometry, {reverse:true});

답변

1 RubenHelsloot Nov 17 2020 at 05:11

하나 이상의 GeoJSON 항목이 잘못된 방법입니다. 값은 정확하지만 순서가 잘못되었습니다. d3-geo일반적으로 GeoJSON 기능은 시계 방향 으로 예상됩니다 .

구형 다각형은 또한 다각형의 어느면이 내부인지 결정하기 위해 감기 순서 규칙이 필요합니다. 반구보다 작은 다각형의 외부 링은 시계 방향이어야하며 반구보다 큰 다각형의 외부 링은 시계 반대 방향이어야합니다.

옵션 을 사용해야하지만 셰이프 turf를 "되 감는"데 사용할 수 있는 플러그인 또는 도구를 사용하여 데이터 와인딩을 수정할 수 있습니다 reverse: true.