Question

我有一段代码，可以通过点击按钮调用。

const lines = svg.select('lines').selectAll('line').data(arr);
lines.enter().append('line');
lines
  .attr('x1', d => d)
  .attr('y1', d => d)
  .attr('x2', d => d+2)
  .attr('y2', d => d+2)
  .attr('stroke-width', 2);

当我点击按钮时没有显示任何内容，但是第二次点击按钮时可以看到线条。

所以我尝试将 .attr（）链接到 .append（）。像这样：

const lines = svg.select('lines').selectAll('line').data(arr);
    lines.enter().append('line')
      .attr('x1', d => d)
      .attr('y1', d => d)
      .attr('x2', d => d+2)
      .attr('y2', d => d+2)
      .attr('stroke-width', 2);

这次可以在第一次点击按钮时看到线条。

我只是想知道这种行为背后的原因。

Answer 1

在您的第一个代码段中，您正在执行lines变量上的.attr。这持有update选项（页面上已经选择了那些的东西）。由于没有预先存在，因此无需更新。

在第二个代码段中，您正在执行.attr方法返回的 thing 上的.append（通过链接）。那些的内容刚刚被.enter添加到页面中，并且是enter选项。

Answer 2

除了@ Mark（正确）answer之外，值得一提的是你的片段在D3 v3.x中可以正常使用！

D3创造者Mike Bostock在D3 v2中引入了魔术行为，他保留在D3 v3.x中，但决定放弃D3 v4.x.要了解更多相关信息，请查看此处：What Makes Software Good?这就是他所说的：

D3 2.0引入了一个变化：附加到输入选择现在将输入元素复制到更新选择中[...] D3 4.0删除了enter.append的魔力。（事实上，D3 4.0完全消除了输入和正常选择之间的区别：现在只有一类选择。）

这是使用D3 v4.x的代码演示。你可以看到，没有任何东西会出现：

＆＃13;

const arr = [10, 20, 30]
const svg = d3.select("svg");
const lines = svg.selectAll('line').data(arr);
lines.enter().append('line');
lines.attr('x1', d => d)
  .attr('y1', d => d)
  .attr('x2', d => d + 40)
  .attr('y2', d => d + 20)
  .attr('stroke-width', 2)
  .attr("stroke", "black");

＆＃13;

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

＆＃13;

现在完全相同的代码，使用D3 v3：

＆＃13;

const arr = [10, 20, 30]
const svg = d3.select("svg");
const lines = svg.selectAll('line').data(arr);
lines.enter().append('line');
lines.attr('x1', d => d)
  .attr('y1', d => d)
  .attr('x2', d => d + 40)
  .attr('y2', d => d + 20)
  .attr('stroke-width', 2)
  .attr("stroke", "black");

＆＃13;

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

＆＃13;

使用＆＃39; attr（）＆＃39;时的选择之间的差异

2 个答案: