使用對象簡化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 4.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：你的簡化碼（第二個）的例子是不是有效的對象（因爲鍵/值對由分離逗號而不是冒號）或有效數組（因爲沒有方括號）。因此，它應該是：

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