Question

我是d3js v3的新手，我正在尝试一个有线条的新程序，根据数据，圆圈嵌入其中。

这是我到目前为止所做的。

var width = 500,
  height = 500;

var animals = ['dog', 'cat', 'bat'];
var fruits = ['apple', 'banana'];


var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var line1 = svg.append("line")
  .attr("x1", 350)
  .attr("y1", 5)
  .attr("x2", 350)
  .attr("y2", 350)
  .attr("stroke-width", 2)
  .attr("stroke", "black");

var line2 = svg.append("line")
  .attr("x1", 80)
  .attr("y1", 5)
  .attr("x2", 100)
  .attr("y2", 350)
  .attr("stroke-width", 2)
  .attr("stroke", "black");

var animal_scale = d3.scale.ordinal()
  .domain(animals)
  .rangePoints([5, 350],.2);

var fruit_scale = d3.scale.ordinal()
  .domain(fruits)
  .rangePoints([5, 350],.2);


var animal_circles = svg.selectAll('circle')
  .data(animals)
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    // is there a way to calc it automatically according to line 1
  })
  .attr('cy', function(d) {
    return animal_scale(d);
  })
  .attr('id', function(d) {
    return d;
  })
  .attr('r', 20);

var fruits_circles = svg.selectAll('circle')
  .data(fruits)
  .enter()
  .append('circle')
  .attr('cx', function(d) {
    // is there a way to calc it automatically according to line 2
  })
  .attr('cy', function(d) {
    return fruit_scale(d);
  })
  .attr('id', function(d) {
    return d;
  })
  .attr('r', 20);

<!DOCTYPE html>
<html>
<meta charset=utf-8>

<head>
  <title></title>
</head>

<body>

  <script src="https://d3js.org/d3.v3.min.js"></script>

</body>

</html>

我看了一些来源并且是新的，有点难以理解。我最终希望能够在项目结束时在行之间移动和拖动圆圈。当前代码存在一些问题，因为它也没有显示第二组圆圈。

有人可以帮助我进一步了解如何做到这一点。这对我来说是一个很好的学习方式。

Answer 1

您可以按类名选择对象并设置数据。这是我拖拽的快速解决方案：jsFiddle。您可以修改drag功能以将限制添加到cx位置

D3js通过拖放动态将圆圈附加到一条线上

1 个答案: