2
このtutorialを使って円の集合を作成し、属性を読み込んで線分を並べ、色分けして移動（ドラッグ＆ドロップ）できるようにしました。 。私は、ノードを作成し、各ノードに「サークル」と「テキスト」を追加する必要があることを知っていますが、すべて一緒に機能させることはできません。D3 js - ドラッグ・アンド・ドロップのラベルやテキストを追加
フルネームサイド負傷不在
NAME0ポートなしなし
名1右舷いいえ
Name2は右舷いいえはい
：ここ<!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>
は、データのスナップショットです
名前2 BiPortいいえいいえ
NAME3 BiStarいいえ
NAME4右舷はいいいえ
Name5コックスいいえ
感謝の男！これは非常に便利でした。私の「変形」の理解は完全には完全ではありませんでした。それ以上のグーグル・グーグルと私のギャップを埋めるのを助けてくれました（https://www.dashingd3js.com/svg-group-element-and-d3js）。 – Rodd
だからサークルは私がそれらをしたい場所を初期化しないことを除いて、私は働くためにすべてを得た。最初に変換される項目が未定義であるというエラーが発生します。しかし、いったんオブジェクトをドラッグしようとすると、トランスフォームはうまく動作します。 インスペクタを確認したところ、それぞれのオブジェクトに適切なxとyが格納されていますが、それでもまだ初期化されていません。
Rodd
OOOOH WAIT。サークルグループの最初の変換で初期化... .attr（ 'transform'、function（d）{return '変換+' + xValue（d）+ '、' + yValue（d）+ '）';} ） – Rodd