D3：为什么“获取”操作会破坏价值答案

【问题标题】：D3: Why does a 'get' action spoil the valueD3：为什么“获取”操作会破坏价值
【发布时间】：2021-08-17 19:03:20
【问题描述】：

这是一个奇怪的情况，当 D3 的 datum() 函数没有参数时，它是一个 get 函数，破坏了绑定到元素的值。

JS斌链接：
https://jsbin.com/jokarapovi/edit?html,js,console

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
</head>
<body>
  <svg id="s">
    <g id="g"></g>
  </svg>
</body>
</html>

JavaScript：

var log = console.log;

d3.select("#s").datum(1);
d3.select("#g").datum(2);

var s = d3.select("#s");
var g = d3.select("#g");
log("svg datum:",s.datum());
log("g datum:",g.datum());

// This line is a 'get' but it spoils the value
var temp = s.select("#g").datum();

// Wrong value:
log("g datum:",d3.select("#g").datum());

这是被破坏的输出：

"svg datum:" 1
"g datum:" 2
"g datum:" 1

为什么 get 函数（没有参数的 D3 datum()）会破坏绑定到元素的值？

【问题讨论】：

标签： javascript svg d3.js binding

【解决方案1】：

您看到的行为是selection.select() 的结果，我们可以从您的get 行中删除.datum()，结果是一样的：

var log = console.log;

d3.select("#s").datum(1);
d3.select("#g").datum(2);

var s = d3.select("#s");
var g = d3.select("#g");
log("svg datum:",s.datum());
log("g datum:",g.datum());

// This get is a 'get' but it spoils the value
var temp = s.select("#g")//.datum();

// Wrong value:
log("g datum:",d3.select("#g").datum());

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body>
  <svg id="s">
    <g id="g"></g>
  </svg>
</body>
</html>

这是因为selection.select 将绑定到selection 的数据绑定到选定的子元素（覆盖之前的数据）：“如果当前元素有关联数据，则此数据传播到对应的选定元素。” (docs)

这在 D3 中通常是理想的，一对一的父子关系通常具有相同的父子关系。

如果您不想将父母的数据传递给孩子，最简单的方法是存储对孩子的引用或使用允许直接选择它的标识符，避免此问题：

var log = console.log;

d3.select("#s").datum(1);
d3.select("#g").datum(2);

var s = d3.select("#s");
var g = d3.select("#g");
log("svg datum:",s.datum());
log("g datum:",g.datum());

// This get is a 'get' but it spoils the value
var temp = d3.select("#g").datum();

// Wrong value:
log("g datum:",d3.select("#g").datum());

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body>
  <svg id="s">
    <g id="g"></g>
  </svg>
</body>
</html>

【讨论】：

ic，tks，不是datum设置值，而是select设置值