D3js通过拖放将圆动态地附加到一条线上
[英]D3js dynamically attach circles into a line with drag and drop
问题描述
我是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>
我看了一些资料，发现它们是新事物，很难理解。 我最终希望能够在项目结束时在行之间移动和拖动圆圈。当前代码存在一些问题，因为它也不会显示第二组圆圈。
有人可以帮助我进一步了解如何执行此操作。 这将是我学习的好方法。
1 个解决方案
解决方案1
0 2017-06-18 13:36:05
您可以通过类名称选择对象并设置数据。 这是我拖放的快速解决方案： jsFiddle 。 您可以修改drag功能以向cx位置添加限制
拖放和修复D3JS中的节点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.