在d3.js中，使用svg.node()的目的是什么？答案

【问题标题】：In d3.js, what is the purpose of using svg.node()?在d3.js中，使用svg.node()的目的是什么？
【发布时间】：2020-03-23 03:11:31
【问题描述】：

我试图理解我得到的代码。我想我有点经历了细节。但还是有一些我真的无法理解。

我无法理解的事情是

1) svg.node()

2) bisect/平分线部分

3) for (让 i = 0; i

1) svg.node()

在生成器“gen()”中，它产生 svg.node()。它实际上是在我的 svg 上绘制东西（我检查了它只是取消注释该行）

什么是 svg.node() 以及为什么我需要使用该参数来绘制一些东西？因为，通常情况下，当我想画一些东西时，我只需要 d3.select('svg').append('###').... 然后我可以在我的'svg'上画一些东西，但是，在这个生成器中，它使用 'svg.node()' 来绘制一些东西。我想知道为什么和什么是 'svg.node()

function* gen() {
  var random = d3.randomNormal(); // Try randomUniform?

  const n = 2000;
  const width = window.innerWidth;
  const height = 400;
  const radius = 2;
  const dodge = dodger(radius * 2 + 1);
  const margin = { top: 0, right: 10, bottom: 20, left: 10 };

  const values = Float64Array.from({ length: n }, random);

  const x = d3.scaleLinear(d3.extent(values), [
    margin.left,
    width - margin.right
  ]);
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("overflow", "visible");

  // var fillScale = d3.scaleSequentialLog(chroma.interpolateSinebow)

  svg
    .append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x));

  function dodger(radius) {
    const radius2 = radius ** 2;
    const bisect = d3.bisector(d => d.x);
    const circles = [];

    return function(x) {
      const l = bisect.left(circles, x - radius);
      const r = bisect.right(circles, x + radius);
      let y = 0;
      for (let i = l; i < r; ++i) {
        const { x: xi, y: yi } = circles[i];
        const x2 = (xi - x) ** 2;
        const y2 = (yi - y) ** 2;
        if (radius2 > x2 + y2) {
          y = yi + Math.sqrt(radius2 - x2) + 1e-6;
          i = l - 1;
          continue;
        }
      }
      circles.splice(bisect.left(circles, x, l, r), 0, { x, y }); 
      return y;
    };
  }

  for (let i = 0; i < n; ++i) {
    if (i % 5 === 0) yield svg.node();
    const cx = x(values[i]); // x(values[i]);
    const cy = height - margin.bottom - dodge(cx) - radius - 1;

    svg
      .append("circle")
      .attr("cx", cx)
      .attr("cy", -400)
      .attr("r", radius)
      .attr("fill", "red")
      .attr("fill", "#9e0dd7") //purple
      .transition()
      .duration(650)
      .ease(d3.easeBounce)
      .attr("cy", cy);
  }

  yield svg.node();
}


const genratorAnimation = gen(); 

let result = genratorAnimation.next();
//genratorAnimation.next();
let interval = setInterval(function(){
   if(!result.done) {
     genratorAnimation.next();
   }
   else {
    clearInterval(interval)
   }
}, 50);

2)bisect/ bisector /splice

我不明白代码使用二等分、二等分线和拼接来放置球的逻辑。我知道 bisect 正在吐出新实体将进入数组的索引号。（基于升序） splice 正在替换或插入数组中的实体。但是，我不明白代码如何实现所需的落球安排。

3) for (让 i = 0; i

我通过将 1==0 更改为 2==0 和 10==0 来玩这个数字。似乎该等式定义了每次掉落的球数。为什么？

我知道我问了太多问题，我愿意通过一一发布许多问题来多次提问。但如果有人能回答，将不胜感激。

提前谢谢你。

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

如果你使用console.log(svg.node())，你可以在你的控制台中找到一个对象包含svg的全部元素节点。

return svg.node() 通常用于显示或更新 svg 图。

【讨论】：

【解决方案2】：

svg.node() 返回 svg 值。但是，我不知道为什么它通过提出论点来吸引一些东西。

【讨论】：