オブジェクトを使用してd3.jsのコードを簡略化する

Question

コードを読みやすくしたいと思います。 このようにメソッドが重複しています。

var svg = d3.append('svg').attr(...).attr('...').attr('...').style(...).style(...); 

これは読みにくいため、コードを簡略化したいと思います。

var svg = d3.append('svg').attr({'class','test_class'},{'x','x_value'}).style({'fill','value'},{...}); 

助けてください。

Answer 1

D3バージョン3.x

あなたはD3 v3.x.を使用していることを行うことができますデモチェック：

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

 
var data = [10, 5, 15, 20, 12, 8, 17]; 
 

 
var circles = svg.selectAll(".circle") 
 
    .data(data) 
 
    .enter() 
 
    .append("circle"); 
 

 
circles.attr({ 
 
    cx: function (d,i) { return 10 + i*40; }, 
 
    cy: 50, 
 
    r: function (d) { return d; }, 
 
    fill: "teal" 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

D3バージョン4.x

をしかし、これは新しいD3 v4.x.に動作しません。そのようなオブジェクトを渡すために、あなたがselection-multiをする必要があります：

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script> 

それ以外にも、あなたは変更する必要があります考えている：

• attrはattrs

• でなければなりませんstyleは、styles

である必要があります。

はv4.xではを使用してデモをチェックする：

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

 
var data = [10, 5, 15, 20, 12, 8, 17]; 
 

 
var circles = svg.selectAll(".circle") 
 
    .data(data) 
 
    .enter() 
 
    .append("circle"); 
 

 
circles.attrs({ 
 
    cx: function (d,i) { return 10 + i*40; }, 
 
    cy: 50, 
 
    r: function (d) { return d; }, 
 
    fill: "teal" 
 
    });

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

PS：キー/値のペアをによって分離されているため、簡略化コード（1秒）のあなたの例は、（有効なオブジェクトではありませんコロンの代わりにコンマ）または有効な配列（角カッコがないため）したがって、そうでなければなりません：

.attr({'class': 'test_class', 'x': 'x_value'})