d3 줄 필터 중복 (제거) 중복 점

Question

D3.js를 사용하여 svg 행을 그립니다. 줄 경로에 추가하기 전에 중복 (x, y) 점을 제거하여 성능을 향상시키고 싶습니다. D3 또는 javascript에서이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 이 테스트를 위해 json 파일에서 데이터를로드하고 있지만 나중에 서버에 배열로 올 수 있습니다.

아래의 코드 스킵 및 콘솔 출력을 참조하십시오. 어떤 도움 (JS {} !== {}에서와 같이) 사용자 정의 iterator 함수를 전달

 var x = d3.scale.linear().domain([xMin, xMax]).rangeRound([0, width]); 
     var y = d3.scale.linear().domain([yMin, yMax]).rangeRound([height, 0]); 

     var line = d3.svg.line() 
      .x(function(d, i) { 
       var xPoint = x((i + 1) * xMult); 
       console.log("xPoint= " + xPoint.toString()); 
       return xPoint; }) 
      .y(function(d) { 
       var yPoint = y(d); 
       console.log("yPoint= " + yPoint.toString()); 
       return yPoint; }) 
      .interpolate("basis-open") 
      .tension(0); 


      ... 


     // Add the valueline path. 
     g.append("path") 
      .attr("class", "line") 
      .attr("d", line(data)); 


-------------------------------------------------- 
Console Output from two lines in code above 
console.log("xPoint= " + xPoint.toString()); 
console.log("yPoint= " + yPoint.toString()); 
---------------------------------------------- 

xPoint= 0 
yPoint= 24 
xPoint= 0 
yPoint= 24 
xPoint= 1 
yPoint= 24 
xPoint= 1 
yPoint= 24 
xPoint= 1 
yPoint= 24 
xPoint= 1 
yPoint= 24 
xPoint= 2 
yPoint= 24 
xPoint= 2 
yPoint= 25 
xPoint= 2 
yPoint= 25 
xPoint= 2 
yPoint= 24 
xPoint= 3 
yPoint= 25 
xPoint= 3 
yPoint= 25 
xPoint= 3 
yPoint= 25 
xPoint= 3 
yPoint= 25 
xPoint= 4 
yPoint= 25 

Answer 1

내가 사용하는 것 underscore _.uniq method에 대한

감사합니다. (자신의 상황에 맞게)이 같은

뭔가 UNIQ와

_.uniq(data, false, function(d1, d2) { 
    return (d1.x === d2.x && d1.y === d1.y); 
}); 

Answer 2

문제는 생각에 관계없이 배열 내에서 자신의 위치의 중복 지점을 제거하는 것입니다. 포인트 또는 점선의 다각형의 경우, 연속적으로 중복되는 점만 제거하고 싶을뿐입니다. 다음은 JavaScript를 사용하여이를 수행하는 방법의 예입니다.

var point1 = { x: 0, y: 24 }; 
var point2 = { x: 1, y: 24 }; 
var point3 = { x: 2, y: 24 }; 
var point4 = { x: 2, y: 25 }; 

var points = [point1, point1, 
       point2, point2, point2, point2, 
       point3, 
       point4, point4, 
       point3]; 

var pointsAreEqual = function(point1, point2) { 
    return point1.x === point2.x && point1.y === point2.y; 
} 

var removeConsecDupes = function(items, itemsAreEqual) { 
    var previous, results = []; 

    var callback = function(value, index) { 
     if (index === 0 || !itemsAreEqual(previous, value)) { 
      results.push(value); 
     } 
     previous = value; 
    } 
    items.forEach(callback); 

    return results; 
} 

var results = removeConsecDupes(points, pointsAreEqual); 

console.dir(results); 

결과 : 도움을

[ { x: 0, y: 24 }, 
    { x: 1, y: 24 }, 
    { x: 2, y: 24 }, 
    { x: 2, y: 25 }, 
    { x: 2, y: 24 } ]