Question

我对D3比较新，我想知道防止这样的代码的最佳方法。通常我很少看到人们在D3.js中循环。但是，我还没有完全理解为什么他们不必这样做。鉴于此代码，我有必要循环吗？或者有没有办法阻止这样的循环？有以下代码段：

var tickPath = svg.selectAll('.tickPath')
    .data(tickValues)
    .enter().append('path')
    .attr('class', 'tickPath')
    .attr('d', function(d) {
      var tickArray = [];
      for (var i = 0; i < numBars; i++) tickArray.push({c : d});
      return area(tickArray);
    })
    .style('fill', (d) => color(d))
    .style('stroke', (d, i) => (i === 0) ? 'black' : '#5e5e5e')
    .style('stroke-width', (d, i) => (i === 0) ? '1px' : '.5px');

Answer 1

你看不到像你这样的代码，因为人们通常使用axis component而不是从头开始构建代码。

另一件事是selections封装了循环。来自d3的文档：

通常不需要使用for循环或递归函数来使用D3修改文档。那是因为你一次操作整个选择，而不是循环遍历各个元素。但是，如果愿意，您仍然可以手动循环元素。

但是，SVG路径是单个元素，因此在您的情况下，d3选择无助于避免/隐藏循环。

使用D3防止循环的最佳方法

1 个答案: