我一直在互联网上搜索一个简单的 fiddle ，即使用两个 x y 坐标获取文本并将其从点 1 转换到点 2，但似乎找不到任何内容，如果有人知道任何示例，我将不胜感激。不过，重点来了，第一段代码成功地将文本绘制在点的中心。
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.Name;
})
.attr("x", function(d) {
return xScale(d.x);
})
.attr("y", function(d) {
return yScale(d.y);
})
.attr("font-family", "sans-serif")
.attr("font-size", "0.5px")
.style('text-anchor','middle')
.attr("fill", "black")
此转换是尝试更改文本并转换到新位置
svg.selectAll('text')
.on('click', function (d) {
svg.selectAll("text")
d3.selectAll("text")
.transition()
.duration(1000)
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.newNames;
})
.attr("x", function(d) {
return xScale(d.xx);
})
.attr("y", function(d) {
return yScale(d.yy);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
})
这不起作用，不显示文本，但也不会在控制台中引发错误。我以前用 svg 形状做过这个，它的工作方式完全相同，但出于某种原因，我似乎无法让它与文本转换，任何帮助都值得感谢，谢谢
最佳答案
你的代码有点工作，但有点奇怪。首先，您的初始字体大小 0.5px 不会在 Chrome 中为我呈现。其次，您的转换代码在以下位置存在语法错误:
svg.selectAll("text")
d3.selectAll("text")
第三，您应该绑定(bind)数据，然后进行转换，而不是在转换期间进行绑定(bind)。另外，如果您只想移动现有文本并且数据没有更改，为什么要重新绑定(bind)呢？而且您当然不需要.enter().append()。
这就是我认为你想要的:
svg.selectAll('text')
.on('click', function(d) {
svg.selectAll("text")
.transition()
.duration(1000)
.text(function(d) {
return d.newNames;
})
.attr("x", function(d) {
return d.xx;
})
.attr("y", function(d) {
return d.yy;
})
.attr("font-family", "sans-serif")
.attr("font-size", "30px")
.attr("fill", "black")
});
完整代码:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script>
var data = [{
x: 20,
y: 20,
xx: 200,
yy: 200,
Name: "Hello",
newNames: "GoodBye"
},{
x: 100,
y: 20,
xx: 300,
yy: 200,
Name: "Love",
newNames: "Hate"
}];
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.Name;
})
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
})
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.style('text-anchor', 'middle')
.attr("fill", "black");
svg.selectAll('text')
.on('click', function(d) {
svg.selectAll("text")
.transition()
.duration(1000)
.text(function(d) {
return d.newNames;
})
.attr("x", function(d) {
return d.xx;
})
.attr("y", function(d) {
return d.yy;
})
.attr("font-family", "sans-serif")
.attr("font-size", "30px")
.attr("fill", "black")
})
</script>
</body>
</html>关于javascript - Click D3.js 上的文本转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34747315/