Question

我想在我的数据集中调用每个单独数据点的函数。这感觉就像使用d3更简洁，而不是简单地循环遍历数据集，我现在写了以下内容：

<script>

data = [1,3,5,7]

        d3.selectAll('p')
            .data(data)
            .enter()
            .append('p')
            .text(function(d){
                someFunction(d)});

         function someFunction(x){
                console.log(x);
         }

</script>

但是，由于我不需要实际创建'p'元素，有没有办法简单地将数据元素调用为args本身？我尝试过使用d3.data（）。enter（）。call（）但是无法让它工作。

Answer 1

要简单地评估一组元素上的函数，可以使用forEach或map返回一个数组，并在数组中的每个元素上计算返回值。

function doSomething(d) {
  // do something here
  // console.log(d);
  return d + 1;
}

[1,2,3,4].forEach( doSomething );

var res = [1,2,3,4].map( doSomething );
// res => [2, 3, 4, 5]

以下是有关D3部分的更多信息：

selectAll和select函数返回选择。您现在可以修改所有元素的属性。

// Selection
var $p = d3.selectAll('p');

Selection的data方法返回Join，这意味着它在Selection和数据数组之间创建了一个连接。

// Join
var $$p = d3.selectAll('p').data([1,2,3,4]);

Join的enter和exit方法允许您访问输入集（数据数组中不存在于Selection中的值）和出口集（Selection中的值）不存在于数据数组中）。要获取更新集，您只需使用“像选择一样加入”。

// Enter a p element for every element in the enter set
$$p.enter().append('p');

// Update all p elements in the update set
$$p.attr('class', 'active');

// Remove all elements in the exit set
$$p.exit().remove();

Join的each方法让您迭代更新集，将数据数组中的每个值作为参数传递。

$$p.each(function(d, i){
  // Current Selection
  d3.select(this);
  // Current data element
  d;
  // Index of the data element in the array
  i;
});

使用d3数据绑定作为辅助效果？

1 个答案: