个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:43:06 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： javascript - 调用 javascript 函数以从无法按预期工作的表单进行 AJAX 调用
文章推荐： c++ - 无法写入闪存程序存储器(PIC18F4620)
文章推荐： c++ - 以 24 小时格式表示的两次时间之间耗时 hh :mm:ss
文章推荐： html - Bootstrap 4 背景颜色在 Chrome 上看起来完全不同
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com