使用对象简化d3.js中的代码

Question

I'd like to make code easy to read. There are too duplicated methods like this.

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

This is a bit difficult to read so I want to simplify code.

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

Any help would be appreciated.

Answer 1

D3 version 3.x

You can do that using D3 v3.x. Check the demo:

 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 version 4.x

However, this will not work in the new D3 v4.x. For passing objects like that, you'll need the selection-multi :

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

Besides that, have in mind that you'll have to change:

• attr must be attrs

• style must be styles

Check the demo using 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: your example of simplified code (the second one) is not a valid object (because the key/value pair is separated by comma instead of colon) or a valid array (because there is no square bracket). Thus, it should be:

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