D3：为啥“获取”操作会破坏价值
Posted
技术标签:
【中文标题】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>
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()）会破坏绑定到元素的值？
【问题讨论】：
【参考方案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设置值以上是关于D3：为啥“获取”操作会破坏价值的主要内容，如果未能解决你的问题，请参考以下文章
Nickel 28对股东提出的价值破坏性高稀释性不具约束力的主动融资提案做出回应，公布新独立董事