我想弄清楚为什么我的补间数字(向上或向下计数)代码在 D3 的版本 4 中不再起作用。
这是我的代码:
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var i = d3.interpolate(this.textContent, d.value);
return function(t) {
this.textContent = form(i(t));
};
});
console.log 告诉我插值工作正常。 那么发生了什么变化?我如何让它发挥作用?
感谢您的帮助。
最佳答案
这里的问题只是内部函数中的 this
,它将不再像在 v3 中那样工作。
让我们证明一下。看看这里的控制台,使用 D3 v3,this
是 DOM 元素:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<p></p>
现在是相同的片段,使用 D3 v4...this
现在是 window
对象:
d3.select("p").transition()
.tween("foo", function(d) {
var i = d3.interpolate(0, 1);
return function(t) {
console.log(this)
};
});
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<p></p>
解决方案:在外部函数中保留对this
的引用作为变量(传统上命名为self
,但这里我将其命名为节点
):
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
//keep a reference to 'this'
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
//use that reference in the inner function
};
});
这是您的代码,仅进行了更改:
var widthpie = 250,
heightpie = 300,
radius = Math.min(widthpie, heightpie) / 2;
var data = [{
antwort: "A",
value: 0.5
}, {
antwort: "B",
value: 0.4
}];
var form = d3.format(",%");
var body4 = d3.select("#chart1");
var svg4 = body4.selectAll("svg.Pie")
.data(data)
.enter()
.append("svg")
.attr("width", widthpie)
.attr("height", heightpie)
.append("g")
.attr("transform", "translate(" + widthpie / 2 + "," + heightpie / 2 + ")");
var pieText = svg4.append("text")
.attr("class", "pieLabel")
.attr("x", 0)
.attr("y", 0)
.text(0)
.attr("dy", "0.2em")
.style("font-size", 19)
.style("fill", "#46596b")
.attr("text-anchor", "middle");
d3.selectAll(".pieLabel").transition()
.delay(500)
.duration(1000)
.tween("text", function(d) {
var node = this;
var i = d3.interpolate(node.textContent, d.value);
return function(t) {
node.textContent = form(i(t));
};
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart1"></div>
PS:我在代码片段中使用了 Firebug,因为 S.O.片段没有正确记录窗口对象。
关于javascript - D3 v4 中的补间数字不再像 v3 中那样工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45831942/