[英]What is Null doing when it is inserted into an attribute function in d3?
I ran into a strange argument I haven't seen.我遇到了一个我从未见过的奇怪争论。 In this code, it puts 'null' into attribute and I guess what this null is doing is receive things when the function is being chained with others.在这段代码中,它将 'null' 放入属性中,我猜这个 null 的作用是在函数与其他函数链接时接收事物。
1) I want to ask you guys what the null is doing. 1) 我想问你们 null 在做什么。 ( where the null is in the code below) (其中 null 在下面的代码中)
var t = svg.selectAll(".symbol").transition()
.duration(duration)
.attr("transform", "translate(0,0)")
.each("end", function() { d3.select(this).attr("transform", null); });
t.select("path.area")
.attr("d", function(d) { return area(d.values); });
t.select("path.line")
.style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; })
.attr("d", function(d) { return line(d.values); });
t.select("text")
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
setTimeout(streamgraph, duration + delay);
2) I assume, the variable t is written to avoid repetitive transform argument. 2)我假设,写入变量 t 是为了避免重复的变换参数。 However, I don't get the order of the argument.但是,我没有得到论证的顺序。 Because I think, it should be written following this order.因为我觉得,应该是按照这个顺序写的。
svg.selectAll('.symbol').select('path.area').attr('d',function(d){return area(d.values);}) .transition().duration(duration).attr('transform','translate(0,0)').... svg.selectAll('.symbol').select('path.area').attr('d',function(d){return area(d.values);}) .transition().duration(duration)。 attr('transform','translate(0,0)')....
However, according to the var t, select('path.area') comes after transition and duration and even after .each.然而,根据 var t, select('path.area') 出现在过渡和持续时间之后,甚至在 .each 之后。
3) Last question, For the version 4 and 5 .each('end'...) needs to be .on('end'.... right? 3)最后一个问题,对于版本 4 和 5 .each('end'...) 需要是 .on('end'.... 对吗?
Before anything else, please keep just one issue per question here at Stack Overflow.首先,请在 Stack Overflow 上为每个问题保留一个问题。
Regarding the null
, the API explains it:关于null
, API解释了它:
A null value will remove the specified attribute.空值将删除指定的属性。
That applies to other methods, such as style()
.这适用于其他方法,例如style()
。
In this example, the circle has a CSS color ("red").在此示例中,圆圈具有 CSS 颜色(“红色”)。 The D3 code sets another color ("green"), and the null
reverts to the original CSS color. D3 代码设置了另一种颜色(“绿色”),而null
将恢复为原始 CSS 颜色。
const circle = d3.select("circle"); let i = 0; setInterval(function() { circle.style("fill", (++i) % 2 ? "green" : null); }, 1000)
circle { fill: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg> <circle r="50" cx="100" cy="75"></circle> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.