Question

我想让代码易于阅读。这样的方法太复制了。

    function compressFiles(file,compressName) {
        var fileContent = file.file;
        var fileName = file.name;
        var zip = new JSZip();
        zip.file(fileName, fileContent);
        zip.generateAsync({ type: "blob" }).then(function (content) {
            saveAs(content, compressName);
        });
    }

这有点难以阅读，所以我想简化代码。

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

任何帮助都将不胜感激。

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：您的简化代码示例（第二个）不是有效对象（因为键/值对用逗号而不是冒号分隔）或有效数组（因为没有方括号）。因此，它应该是：

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

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

1 个答案: