3

D3.jsを使ってsvg線を描いています。ライン パスに追加する前に、重複する (x,y) ポイントを削除してパフォーマンスを改善したいと考えています。D3 または JavaScript でこれを行う最善の方法は何ですか。このテストでは、json ファイルからデータを読み込んでいますが、後でサーバー上の配列になる可能性があります。

以下のコード スニップとコンソール出力を参照してください。

助けてくれてありがとう

        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
4

2 に答える 2

1

ただし、 uniq の問題は、配列内の位置に関係なく、重複したポイントを削除していることです。ポイントの多角形またはポイントのラインの場合、連続する重複ポイントのみを削除する必要があります。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 } ]
于 2013-03-08T21:41:21.237 に答える
0

カスタムイテレータ関数を渡すアンダースコア_.uniqメソッドを使用します（ JS のように{} !== {}）。

このようなもの（独自のコンテキストに適応）

_.uniq(data, false, function( d1, d2 ) {
    return (d1.x === d2.x && d1.y === d1.y);
});
于 2013-03-08T20:27:49.617 に答える