d3属性を増やす最も良い方法

Question

d3オブジェクトの属性値を増減するコードがあります。

私は、次を使用して、それをやった：

var diff=5; 
d3Selector.attr("x",function(){ 
    return Number(d3Selector.attr("x"))+diff; 
}); 

単に+=作品JSで。現在の値を取得して追加して設定するよりも、これを行うより良い方法はありますか？

以下は、Robert Longsonの提案で作成され、私はd3_v4を使用しています。ここでの問題は、数字の追加ではなく（文字列として）連結されていることです。​​を使用して解決しようとしましたが、Must be lvalueというエラーが返されます。

function mov() { 
 
    var diffX = 5; 
 
    d3.select("#ee")["_groups"][0][0]["attributes"].x.value += diffX; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script> 
 
<button onclick="mov()">Click to move</button> 
 
<br> 
 
<svg width="400" height="400"> 
 
    <rect id="ee" x="10" y="10" width="100" height="100" /> 
 
</svg>

Answer 1

SVG DOMを使用してください。私はセッターとゲッターはD3でどのように機能するかを理解することが、ここにいくつかの光を当てることができると信じて

function mov() { 
 
    var diffX = 5; 
 
    d3.select("#ee").node().x.baseVal.value += diffX; 
 

 
    // or alternatively 
 
    // document.getElementById("ee").x.baseVal.value += diffX; 
 
    // as suggested by altocumulus 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script> 
 
<button onclick="mov()">Click to move</button> 
 
<br> 
 
<svg width="400" height="400"> 
 
    <rect id="ee" x="10" y="10" width="100" height="100" /> 
 
</svg>

Answer 2

D3セッターとゲッター

。

あなたは「現在の値を取得し、追加し、再度設定」を代わりの、指定された属性をインクリメントするためのより良い方法を求めて、あなたが言った：JSで

単に+ =

の作品

なぜ、私たちはD3を使って同じことをすることができませんか？どれどれ。この非常に基本的なコードを考えると

：それは（50,50）で円を描いて

var svg = d3.select("body").append("svg"); 

var circle = svg.append("circle").attr("cx", 50) 
    .attr("cy", 50).attr("r", 5); 

。ゲッターを使って円の値をcxにすることができます。ゲッターは基本的に同じ機能ですが、唯一の1つの引数で：私達はちょうどJS +=を使用して、Xに値を追加する場合

var x = circle.attr("cx");//returns 50 

だから、何が起こりますか？

var x += 100;//returns 50100 

50 + 100は、私達はちょうどxの値が文字列ではなく、番号であることを発見し50100.ではありません。数に変換するにはこのやろう：

var x = circle.attr("cx"); 
x = +x; 
x += 100; 

さて、xは、我々が正常にxに付加価値を150です。

ここで最も重要な部分があります。これは円の位置を変更するものではありません。xは、ゲッターを使用して、そのサークルの値を取得する変数です。cx

xの値を変更することは、変数の値を変更することです。要素には影響しません。

circle.attr("cx", x);//now the circle moves to (150,50) 

結論：そのパターン（取得

は、我々はセッターを使用する必要があります（baseValを操作することなく）、円の位置を変更するには、それは2つの引数を持つ関数であります現在の値、何かを加えたり、値を再び設定したりすることは面倒であり、それほどエレガントではないかもしれませんが、それはD3の標準パターンです。