英文:
Why "d" is undefined in attrTween?
问题
以下是您代码的翻译：
我正在尝试在d3上创建一个界面。我找到了弧形动画代码（http://bl.ocks.org/mbostock/5100636），我想稍微修改它（不使用arcTween()函数）。
这是我的代码的一部分：
```javascript
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = imgs3
.append('path')
.attr('d', arc3)
.attr('stroke', 'white')
.attr('fill', 'white')
.style('fill-opacity', 0.5)
.attr('transform', 'translate(' + (146.5) + ',' + (150.9) + ')')
.datum({ endAngle: 0.0628 * 90, newAngle: 0.0628 * 270 })
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
但出现错误：类型“{ endAngle: number; newAng: number; }”的参数无法分配给类型“DefaultArcObject”。类型“{ endAngle: number; newAng: number; }”中缺少属性“innerRadius”。
并且在浏览器的控制台中，“d”未定义。我尝试寻找其他可行的解决方案，但没有成功。
希望这有助于您解决代码中的问题。
<details>
<summary>英文:</summary>
I am trying to create an interface on d3. I found the arc animation code (http://bl.ocks.org/mbostock/5100636), and I want to change it a bit (without function arcTween()).
Here is part of my code:
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = imgs3
.append('path')
.attr('d', arc3)
.attr('stroke', 'white')
.attr('fill', 'white')
.style('fill-opacity', 0.5)
.attr('transform', 'translate('+(146.5)+','+(150.9)+')')
.datum({endAngle: 0.0628*90, newAngle: 0.0628*270})
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
But there error: Argument of type '{ endAngle: number; newAng: number; }' is not assignable to parameter of type 'DefaultArcObject'. Property 'innerRadius' is missing in type '{ endAngle: number; newAng: number; }'.
And in browser's console "d" is undefinded. I tried to find any other working solutions, but to no avail.
</details>
# 答案1
**得分**: 1
When you do this...
.attr('d', arc3)
... the second argument of `attr`, which is the `arc3` function, gets passed the bound datum, the index, and the node's group.
However, there is no bound datum, since in your code the `datum` method comes **after** that.
The simplest solution is just moving the `datum` to before the `.attr('d', arc3)` line:
```javascript
var svg = d3.select("svg");
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = svg
.append('path')
.datum({
endAngle: 0.0628 * 90,
newAngle: 0.0628 * 270
})
.attr('d', arc3)
.attr('fill', 'teal')
.style('fill-opacity', 0.5)
.attr('transform', 'translate(' + (146.5) + ',' + (150.9) + ')')
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
英文:
When you do this...
.attr('d', arc3)
... the second argument of attr, which is the arc3 function, get's passed the bound datum, the index and the node's group.
However, there is no bound datum, since in your code the datum method comes after that.
The simplest solution is just moving the datum to before the .attr('d', arc3) line:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
var svg = d3.select("svg");
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = svg
.append('path')
.datum({
endAngle: 0.0628 * 90,
newAngle: 0.0628 * 270
})
.attr('d', arc3)
.attr('fill', 'teal')
.style('fill-opacity', 0.5)
.attr('transform', 'translate(' + (146.5) + ',' + (150.9) + ')')
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
<!-- language: lang-html -->
<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论