D3 js - 添加标签或文本以拖放圆圈答案

【问题标题】：D3 js - Add a label or text to drag and drop circlesD3 js - 添加标签或文本以拖放圆圈
【发布时间】：2017-03-10 20:35:08
【问题描述】：

我用这个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>

这是数据的快照：

全名侧受伤缺席

名称0 端口号号

Name1 Starboard No No

Name2 Starboard 否是

名称 2 BiPort 否否

Name3 BiStar No No

Name4 Starboard Yes No

姓名 5 考克斯不不

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

你有正确的方法，但如果你为节点（或g元素）分配一个变换，这样文本和圆圈默认对齐，我会在这个答案中采用这种方法（尽管您可以重新计算节点的移动并单独重新计算文本和圆坐标）。

您可能会遇到困难的核心原因是，您会看到在拖动功能中您正在设置属性cx 和cy：

d3.select(this).attr("cx", dg.x = d3.event.x).attr("cy", dg.y = d3.event.y);

但是被拖动的g/node 元素没有这些属性——这些是该行引用的this。这是因为当它们最初附加到圆圈时，您已将 on drag 函数移动到节点。

相反，将上面的行替换为可以为拖动的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>

【讨论】：

谢谢你！这非常有帮助。我对“转换”的理解绝对不完整。做了一些进一步的谷歌搜索，这有助于填补我的空白 (dashingd3js.com/svg-group-element-and-d3js)。
所以我得到了一切工作，除了圆圈没有在我想要的地方初始化。抛出一个错误，即最初要转换的项目未定义。但是一旦我尝试拖动对象，转换效果很好。我检查了检查器，每个对象确实存储了正确的 x 和 y，但它仍然没有在那里初始化。
噢，等等。您在 CIRCLEGROUP 的第一个变换下初始化... .attr('transform',function(d) { return 'translate('+xValue(d)+','+yValue(d)+')'; })