javascript - 如何打印线生成器的结果？

Question

我有以下代码:

valuelinePath = svg.append("path")
    .data([data])
    .attr("class", "line2")
    .attr("d", valueLine)
    .attr("transform", "translate(42" + ", 70" + ")");

var newvalueLine = d3.line()
      .x(function(d) {
        return x(d.years);
      })
      .y(function(d) {
        return y(d[cityName]);
      });

 valuelinePath
    .data([data])
    .attr("class", "line2")
    .attr("d", newvalueLine)
    .attr("transform", "translate(42" + ", 70" + ")")
    .style("display", null);

我假设 newvalueline 是由字符串生成器生成的字符串，但不是，当我尝试调试 newvalueline 的值时，调试器告诉我它是一个函数

newvalueLine
ƒ t(t){var a,c,s,f=t.length,l=!1;for(null==i&&(u=o(s=ee())),a=0;a<=f;++a)!(a<f&&r(c=t[a],a,t))===l&&((l=!l)?u.lineStart():u.lineEnd()),l&&u.point(+n(c,a,t),+e(c,a,t));if(s)return u=null,s+""||null}

但是当我访问我刚刚分配给它的 valuelinePath 的 attr("d") 时，它能够返回该路径的正确字符串表示形式

valuelinePath.attr("d")
"M-3285.4586214143906,388.2L-3285.458621411788,307.8L-3285.4586214091855,124.79999999999995L-3285.4586214065826,97.19999999999999L-3285.45862140398,12.599999999999966L-3285.4586214013775,243L-3285.4586213987745,43.19999999999999L-3285.458621396172,14.400000000000034"

那么我如何获取 newvalueLine 的字符串表示以用于调试目的，而不必将其分配给 valuelinePath 属性并再次检索它？为什么它是一个函数而不是一个字符串？

我读到的东西https://www.dashingd3js.com/svg-paths-and-d3js https://bl.ocks.org/d3indepth/e312c205b6b07757551bffafb265589b

我假设行生成器返回一个路径字符串，就像上面的例子一样？没有？

Answer 1

要获取行生成器的返回值，即字符串，您需要做的就是将数据数组传递给它。例如:

const data = d3.range(10).map(d => [d, d]);
const lineGenerator = d3.line();
console.log(lineGenerator(data))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这几乎回答了标题中的问题。但是，我们还必须解释您的困惑。

代码中让您感到困惑的部分是:

.attr("d", newvalueLine)

在阅读您的问题后，在我看来您认为 newvalueLine 已经是一个字符串，被传递给路径的 d 属性。混淆在这里变得很清楚:“我假设 newvalueline 是由字符串生成器生成的字符串，但不是，当我尝试调试 newvalueline 的值时，调试器告诉我它是一个函数”。但是，您可以清楚地看到，newvalueLine 是一个函数。

这里发生的事情在 D3 API 中有很好的记录。对于几种方法，例如 .selection.attr ，您可以将常量或函数作为 value 属性传递。如果 value 是函数，则调用该函数并使用其返回值。正如 API 所说:

selection.attr(name[, value]) <>

[...] if the value is a function, it is evaluated for each selected element [...] The function’s return value is then used to set each element’s attribute.

“但是传递给 newvalueLine 的参数在哪里？”，您可能会问。 API 再次说明:

[...] if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).

因此，这:

.attr("d", newvalueLine)

与此相同:

.attr("d", function(datum){
    return newvalueLine(datum);
});

我们可以在下面的代码片段中轻松演示这一点，它根本不使用 D3。这里有一个名为 callback 的函数，它获取传递的参数并将其乘以 2。函数 foo 接受两个参数来设置给定值，如果第二个参数是它调用它的一个函数。

注意我们是如何在foo中使用callback来设置value的值的。

首先，只使用函数名，不带任何参数:

function callback(datum) {
  return datum * 2;
};

function foo(firstParameter, secondParameter) {
  if (typeof secondParameter === "function") return secondParameter(firstParameter);
};

//Look here:
const value = foo(2, callback);

console.log(value)

现在，显式传递参数:

function callback(datum) {
  return datum * 2;
};

function foo(firstParameter, secondParameter) {
  if (typeof secondParameter === "function") return secondParameter(firstParameter);
};

//Compare the snippet above with this:
const value = foo(2, function(d) {
  return callback(d)
});

console.log(value)

如您所见，参数会自动传递给回调。