Question

更新：正在寻找一种方法，使用下面的代码为每个可拖动的圆圈添加标签。需要将文字略微显示在圆圈下方，并在移动圆圈时保持在该位置。想用D3保留它。

在here创建的一些工作的基础上构建类似的东西。

尝试在拖动其中一个圆圈时移动的每个点下方添加标签（点击自定义）。在堆栈溢出时已经看到 this answer 。

如何设定数据点，最简单的方法是什么？

<html ng-app>
<html lang="en">
<title>Test</title>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://giottojs.org/d3-canvas-transition/0.3.6/d3-canvas-transition.js"></script>
    <link rel="stylesheet" type="text/css" href="static/stylesheets/style.css?q=1280549780">
</head>
<body>
<body>
  <div id="paper"></div>
  <div class="s c">
      <div id="example" class="3 c"></div>
  </div>
</body>

<script>
var PrimCol = "Blue"
    SeconCol = "Black"

var example = d3.select("#example"),
    width = 368,
    height = 583,
    radius = 9,
    area = Math.PI*radius*radius,
    margin = 2*radius,
    text = '';

var shapes = ['Circle'],
    color = d3.scaleSequential(d3.interpolateViridis),
    N = 11,  // Number of Circles
    points = d3.range(N).map(function(i) {
    return {
        type: "Circle",
        x: Math.round(Math.random() * (width - 2*margin) + margin),
        y: Math.round(Math.random() * (height - 2*margin) + margin)
    };
});

draw('svg');

function draw(type, r) {
    example.select('.paper').remove();
    var paper = example
        .append(type)
        .classed('paper', true)
        .style('stroke', '#333')
        .attr('width', width).attr('height', height).canvasResolution(r).canvas(true);

    var marks = d3.symbol().type(function (d) {return d3['symbol' + d.type];}).size(function (d) {return area;});

    // Background Information
    paper.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', width)
        .attr('height', height)
        .style("stroke-width", 0)
        .style('fill', 'White')
        .style('fill-opacity', 1);

    paper
        .selectAll("path")
        .data(points)
        .enter()
        .append("path")
        .attr("transform", translate)
        .attr("d", marks)
        .style("fill", PrimCol)
        .style("stroke", SeconCol)
        .style("stroke-width", '1px')
        .on("mouseenter.hover", mouseenter)
        .on("mouseleave.hover", end)
        .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", mouseenter));    

    function mouseenter () {
        d3.select(this).style('cursor', 'move');
    }

    function dragstarted () {
        d3.select(this).raise().style('stroke-width', '3px');
    }

    function dragged(d) {
        d.x = d3.event.x;
        d.y = d3.event.y;
        d3.select(this).attr("transform", translate(d));
    }

    function end() {
        var el = d3.select(this),
            d = el.datum();
        el.style('cursor', 'default').style('stroke-width', '1px');
    }

    function translate (d) {
        return "translate(" + d.x + "," + d.y + ")";
    }
} 
</script>
</html>

Answer 1

这是我的方式，使用JQuery和Jquery-UI。您可以使用div设置尽可能多的div＆＃39; circle＆＃39;像样品一样。您可以通过data-x和data-y设置初始位置。或者你可以按自己的方式行事，有很多可能来操纵这个位置。我还添加了随机初始位置。有些标签是隐藏的，会在悬停时显示。如果你想通过点击触发它，只需在css中删除悬停并将点击功能添加到你的jquery。

＆＃13;

$('.fixed').each(function(index) {
  $(this).css({'top' : $(this).data("y"), 'left' : $(this).data("x")});
});

$('.random').each(function(index) {
  var x =  $(window).width();
  var y = $(window).height();
  $(this).css({'top' : Math.round(Math.random() * y), 'left' : Math.round(Math.random() * x)});
});



$( ".circle" ).draggable();

＆＃13;

.circle {
  height: 20px;
  width: 20px;
  background: blue;
  border-radius: 50%;
  position: absolute;
}
.random {
  background: #000000;
}
.circle > span {
  position: absolute;
  width: 100px;
  height: 20px;
  margin-left: 25px;
}
.circle > .hidden {
  display: none;
}
.circle:hover > .hidden {
  display: block;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="circle fixed" data-y="200" data-x="300">
  <span class="hidden">Hidden Title Here</span>
</div>

<div class="circle fixed" data-y="10" data-x="50">
  <span>Title Here</span>
</div>

<div class="circle random">
  <span>Title Here</span>
</div>

<div class="circle random">
  <span class="hidden">Hidden Title Here</span>
</div>

＆＃13;

希望这有帮助！

Answer 2

为实现这一目标，算法如下：

制作小组。
要对群组附加拖动和其他侦听器。
向每个组添加一个圆圈和文字。
拖动整个组的工作，以便圆圈和文本一起移动。

首先组建一个这样的小组。

var groups = paper
    .selectAll(".group-drag")//selector using class
    .data(points)//attach data to selection
    .enter()
    .append("g")//add as many groups as data        
    .attr("transform", translate)//give translate to the group
    .classed("group-drag", true)//add class to the group
    .on("mouseenter.hover", mouseenter)//attach listener to the group
    .on("mouseleave.hover", end)
    .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", mouseenter));

现在将圆圈和文字添加到群组中，如下所示：

    groups.append('text')
        .attr("dx", 16)
    .text(function(d){return d.type});        

    groups.append("path")
    .attr("d", marks)
    .style("fill", PrimCol)
    .style("stroke", SeconCol)
    .style("stroke-width", '1px')

现在拖动将对包含文本和圆圈的整个组起作用，因此它们将一起移动。

工作代码here

更改：将标签添加到可拖动圆圈

2 个答案: