SVG 경로 렌더링이 geometricPrecision 옵션을 넘어 앤티 앨리어스가 적용될 수 있습니까?

Question

SVG에 대한 geometricPrecision 스타일 옵션을 알고 있지만 경로는 여전히 추악한 앨리어싱 양을 나타냅니다. 사용하고있는 데이터 세트는 약 400 포인트 정도로 상당히 밀도가 높습니다. 아래의 빨간색 경로를 살펴보십시오. SVG에서 안티 앨리어싱 경로에 대한 다른 옵션은

이 있습니까?

EDIT : 라인은 다음과 같이 탭으로 구분 된 데이터로부터 생성 (마이너스 중요하지 않은 세부 사항)된다

:

var x = d3.scaleLinear() 
    .range([0, width]); 

var y = d3.scaleLinear() 
    .rangeRound([height, 0]); 

x.domain([0,240000]); 
y.domain([0,30]); 


var line = d3.line() 
    .x(function(d) { return x(d.income); }) 
    .y(function(d) { return y(d.tax); }); 
... 
... 
... 

g.append("path").classed("linedata", true) 
     .datum(data) 
     .attr("fill", "none") 
     .attr("stroke", "#e04444") 
     .attr("stroke-linejoin", "round") 
     .attr("stroke-linecap", "round") 
     .attr("stroke-width", 2.3) 
     .attr("d", line); 

Answer 1

그것이 여기에서 문제가 밝혀 앨리어싱 아니다 또는 고밀도 데이터 보간법. 결국 경로 곡률에 맞게 데이터 밀도를 최적화하는 동안 데이터 값을 SVG 픽셀 값에 매핑하는 데 사용 된 d3.scale이라는 문제가 발생했습니다.

대신 rangeRound으로 D3 크기를 만들면 렌더링 된 경로가 별칭으로 표시되도록 가장 가까운 픽셀로 매핑됩니다. 단순히 rangeRound을 range으로 전환하면 데이터를 보간하는 데 사용 된 방법에 관계없이 훨씬 더 부드러운 경로가됩니다.