我用了这个tutorial创建一组圆圈，通过读入属性将它们排成一行，对它们进行颜色编码，并使它们可移动(拖放)。我知道我需要创建一个“节点”并将“圆”和“文本”附加到每个节点，但我无法让它们一起工作。
<!DOCTYPE html>
<html>
<head>
<title>Set Lineups</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="d3.js"></script>
<style>
body {padding: 15px}
.active {
stroke: #000;
stroke-width: 2px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
</head>
<body>
<!--begin svg block-->
<svg width="960" height="500"></svg>
<script>
//now in js
//define variables
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
// setup x
var xValue = function(d) {
if (d.Side == "Starboard") {return x=Math.round(2*radius)}
else if (d.Side == "BiStar") {return x=Math.round(2*radius)}
else if (d.Side == "Port") {return x=Math.round(5*radius)}
else if (d.Side == "BiPort") {return x=Math.round(5*radius)}
else if (d.Side == "Cox") {return x=Math.round(8*radius)}
}
// setup y
var yPort = 0
var yStar = 0
var yCox = 0
var yValue = function(d) {
if (d.Side == "Starboard") {
y = Math.round(2*radius) + yStar;
yStar = y;
return y}
else if (d.Side == "BiStar") {
y = Math.round(2*radius) + yStar;
yStar = y;
return y}
else if (d.Side == "Port") {
y = Math.round(2*radius) + yPort;
yPort = y;
return y}
else if (d.Side == "BiPort") {
y = Math.round(2*radius) + yPort;
yPort = y;
return y}
else if (d.Side == "Cox") {
y = Math.round(2*radius) + yCox;
yCox = y;
return y}
}
//read in the data
d3.csv("Roster.csv", function(data) {
data.forEach(function(d) {
name : d["Full Name"];
side : d["Side"];
injured : d["Injured"];
absent : d["Absent"];
console.log(d);
});
var node = svg.selectAll(".node")
.data(data)
.enter().append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("circle")
.style("fill", function(dg, i) {
if (dg.Side == "Port") {color = "red"}
else if (dg.Side == "Starboard") {color = "green"}
else if (dg.Side == "BiPort") {color = "orange"}
else if (dg.Side == "BiStar") {color = "blue"}
else if (dg.Side == "Cox") {color = "grey"}
if (dg.Injured == "Yes") {color = "yellow"}
if (dg.Absent == "Yes") {color = "yellow"}
return color;
})
.attr("cx", function(dg) { return xValue(dg); })
.attr("cy", function(dg) { return yValue(dg); })
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("cx", function(dg) { return xValue(dg); })
.attr("cy", function(dg) { return yValue(dg); })
.text(function(dg) {return dg['Full Name']});
function dragstarted(dg) {
d3.select(this).raise().classed("active", true);
}
function dragged(dg) {
d3.select(this).attr("cx", dg.x = d3.event.x).attr("cy", dg.y = d3.event.y);
}
function dragended(dg) {
d3.select(this).classed("active", false);
}
})
</script>
</body>
这是数据的快照:
全名边受伤缺席
Name0 端口号 No
Name1 右舷否否
Name2 右舷 否 是
名称 2 BiPort 否 否
Name3 BiStar 否 否
Name4 右舷 是 否
姓名 5 考克斯 否 否
最佳答案
你有正确的方法，但如果你为节点(或 g 元素)分配一个转换，那么文本和圆圈默认对齐会更容易，我会接受此答案中的方法 (尽管您可以重新计算节点的移动并单独重新计算文本和圆坐标)。
您可能会遇到困难的核心原因是，您会在拖动函数中看到您正在设置属性 cx 和 cy:
d3.select(this).attr("cx", dg.x = d3.event.x).attr("cy", dg.y = d3.event.y);
但拖动的 g/node 元素没有这些属性 - 这些是该行引用的 this。这是因为当节点最初附加到圆圈时，您已将拖动功能移动到节点。
相反，将上面的行替换为可以为拖动的 g/node 重新计算变换的行。这将更新拖动的 g/node(以及任何其他子节点)中的文本和圆圈。
当然，如果对每个 g/node 使用一个转换，则不需要使用 cx,cy 的属性完全没有圈子。
放在一起看起来像这样:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(20).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
var circleGroup = svg.selectAll('g')
.data(circles)
.enter().append('g')
.attr('transform',function(d) { return 'translate('+d.x+','+d.y+')'; })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
circleGroup.append("circle")
.attr("r", radius)
.style("fill", function(d, i) { return color(i); })
circleGroup.append("text")
.text(function(d,i) { return i; })
.style('text-anchor','middle')
.attr('y',4);
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("transform","translate("+(d.x = d3.event.x)+','+(d.y = d3.event.y)+')' );
}
function dragended(d) {
d3.select(this).classed("active", false);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg width="500" height="300"></svg>关于javascript - D3 js - 添加标签或文本以拖放圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42727268/