Question

我试图了解d3的方法如何工作。我想我已经基本达到了d3的水平，但是关于selectAll方法有一件我不理解的怪事。因此，当我尝试创建dom节点并将其附加到选定的dom元素时，无论它是否存在，有时它会创建四个或两个或六个节点。为了使问题更清楚，我将使用简单的示例。

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
     <svg></svg>
  </body>
</html>

JS：

    dummyData = [
         {
           name: 'A',
           age: 50
         },
         {
           name: 'B',
           age: 20
         }
       ]

    svg = d3.select('svg')
            .attr('width','500')
            .attr('height', '300')
          .append('g')
            .attr('transform','translate(40, 40)');


function example_1() {

    svg.selectAll('circle')
      .data(dummyData)
      .enter()
    .append('circle')
      .attr('transform', d => `translate(${d.age}, 20)`)
      .attr('cx',32).attr('cy',53)
      .attr('r',15);

 }


function example_2() {

    svg.selectAll('g')
      .data(dummyData)
      .enter()
    .append('circle')
      .attr('transform', d => `translate(${d.age}, 20)`)
      .attr('cx',32)
      .attr('cy',53)
      .attr('r',15);
}

function example_3() {

    svg.selectAll('div')  // This div is an arbitrary value. It can be any html tag to output the same result 
      .data(dummyData)
      .enter()
    .append('circle')
      .attr('transform', d => `translate(${d.age}, 20)`)
      .attr('cx',32)
      .attr('cy',53)
      .attr('r',15);

 }

function example_4() {

   svg.selectAll('g')
      .data(dummyData)
      .enter()
    .append('circle')
      .attr('transform', d => `translate(${d.age}, 20)`)
      .attr('cx',32)
      .attr('cy',53)
      .attr('r',15);

    svg.selectAll('g')
      .data(dummyData)
      .enter()
    .append('path')
      .attr('stroke','#000')
      .attr('d',`M5,5H500`)
}

function example_5() {

   svg.selectAll('g')
      .data(dummyData)
      .enter()
    .append('circle')
      .attr('transform', d => `translate(${d.age}, 20)`)
      .attr('cx',32)
      .attr('cy',53)
      .attr('r',15);

    svg.selectAll('g')
      .data(dummyData)
      .enter()
    .append('g')
    .append('path')
      .attr('stroke','#000')
      .attr('d',`M5,5H500`)
}


example_1(); // This one creates DOM as: 

<svg>
  <g>
    <circle></circle>
    <circle></circle>
  </g>
</svg>

example_2(); // This one creates DOM as:

<svg>
  <g>
    <circle></circle>
    <circle></circle>
    <circle></circle>
    <circle></circle>
  </g>
</svg>

example_3(); // This one creates DOM as:

<svg>
  <g>
    <circle></circle>
    <circle></circle>
    <circle></circle>
    <circle></circle>
  </g>
</svg>

example_4(); // This one creates DOM as:

<svg>
  <g>
    <circle></circle>
    <circle></circle>
    <path></path>
    <path></path>
    <circle></circle>
    <circle></circle>
    <path></path>
    <path></path>
  </g>
</svg>

example_5(); // This one creates DOM as:

<svg>
  <g>
    <circle></circle>
    <circle></circle>
    <g>
      <path></path>
    </g>
    <g>
      <path></path>
    </g>
  </g>
</svg>

在我的示例中，变量svg是dom节点g，是svg的子级。这意味着它既没有圆也没有g或div作为其子级。那么selectAll方法是用来做什么的呢？为什么我们不能只写为

svg.data(dummyData)
  .enter()
.append('circle')
  .attr('transform', d => `translate(${d.age}, 20)`)
  .attr('cx',32).attr('cy',53)
  .attr('r',15);

尽管我尝试了更多不同的示例，但是它们的行为都不同，但是我真的看不到幕后发生的事情。请帮助我至少了解一点。我很困惑。

Answer 1

让我们先回答您的最后一个问题。你为什么不能：

svg.data(dummyData).enter()

d3使用输入，更新，退出模式。关于该模式有大量的读物，我强烈建议您对此模式进行研究。但这就是问题所在，不仅是要创建初始元素，而且还要稍后对其进行更新。 .selectAll为我找到了与选择器匹配的所有元素。 .data将数据绑定到它们。 .enter告诉我.selectAll中所有不是的数据元素。因此，您的问题的答案将变成没有.selectAll，d3无法计算输入的数据，并且没有附加任何内容。在经典用法中，在初始渲染时，.selectAll返回空（它们都不存在），因此它们都进入了。

现在，借助基础知识，让我们按照示例5进行操作：

svg.selectAll('g') //<-- no gs exist in svg
  .data(dummyData)
  .enter() //<-- so, since data is two elements
.append('circle') //<-- you get two circles
  .attr('transform', d => `translate(${d.age}, 20)`)
  .attr('cx',32)
  .attr('cy',53)
  .attr('r',15);

svg.selectAll('g') //<-- no gs still exist in svg
  .data(dummyData)
  .enter() //<-- so since data is two elements
.append('g') //<-- you get two gs
.append('path') //<-- each with a path under them
  .attr('stroke','#000')
  .attr('d',`M5,5H500`)

现在，您在做什么在这里真的没有意义。如果您关心圈子，为什么选择g？通常，我什至不建议完全选择元素。如果我想要一个圆来代表我的每个基准面，我将执行以下操作：

svg.selectAll('.my_cool_circle')
  .data(dummyData)
  .enter()
.append('circle')
.attr('class', 'my_cool_circle')
...

通过使用一个类，我知道这些圆圈是代表我的dummyData的圆圈。另外，如果以后需要返回更新我的圈子（因为我的数据现在是：

dummyData = [
     {
       name: 'A',
       age: 50
     },
     {
       name: 'B',
       age: 20
     },
     {
       name: 'C',
       age: 30
     }          
   ]

）。

然后：

 svg.selectAll('.my_cool_circle')
  .data(dummyData)
  .enter()

只会返回'C'数据，我只会追加1个新圆。

对d3的selectAll方法的好奇心

1 个答案: