将函数传递给 .attr('d')？

Question

我试图在一个.data() 选择中使用两个不同的区域生成器，这样一组点的区域可以从上到下呈现，而第二组的区域可以从左到右呈现。我可以将胖箭头函数传递给除“d”之外的每个.attr()，这会产生以下错误：

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function area(da…".

我需要访问选择索引才能从布尔数组中设置区域。 Please see the jsfiddle I've set up with the relevant code. 我已经评论了我将函数传递给 .attr('d') 的两次尝试。

Answer 1

如果您检查生成的代码，您会看到：

所以，你没有得到价值。而是调用该函数。

将(d)添加到返回值，以便执行区域生成器函数：

  .attr('d', function(d, i){
    if (horizontalNotVertical[i]) {
        return horizontalArea(d);
    } else {
        return verticalArea(d);
    }
  })

Answer 2

代码中的问题只是 D3 中著名的第一个参数。

你的comment：

我想知道为什么 D3 会自动执行区域生成器，如果它自己传递 (.attr('d', myArea))，但如果区域生成器由匿名函数返回，它不会自动执行...

不正确。 D3 执行函数返回的函数没有问题。

当你这样做时......

.attr('d', myArea)

... 数据自动作为第一个参数传递给myArea。让我们看一个基本的演示：

var data = ["foo", "bar", "baz"];
var sel = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("whatever")

sel.attr("whatever", callback)

function callback(d) {
  console.log("The datum is " + d)
}

<script src="https://d3js.org/d3.v5.min.js"></script>

所以，如果你想把 myArea 函数放在匿名函数中，你必须指定第一个参数，因为数据被传递给外部函数，而不是 myArea：

.attr('d', function(d){
//1st arg here------^
    myArea(d);
//and here-^
});

让我们看看：

var data = ["foo", "bar", "baz"];
var sel = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("whatever")

sel.attr("whatever", function(d) {
  callback(d);
})

function callback(d) {
  console.log("The datum is " + d)
}

<script src="https://d3js.org/d3.v5.min.js"></script>

因此，在你的情况下，你只需要：

.attr('d', (d, i) => (horizontalNotVertical[i]) ? horizontalArea(d) : verticalArea(d));

只是为了表明 D3 执行另一个函数返回的函数没有问题，看看最后这个 sn-p：

var data = ["foo", "bar", "baz"];
var sel = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("whatever")

sel.attr("whatever", function() {
  callback();
})

function callback() {
  console.log("I don't have the datum!")
}

<script src="https://d3js.org/d3.v5.min.js"></script>

这里是更新的 jsfiddle：https://jsfiddle.net/zt5vxbm6/