xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> var margin = {top: 10, right: 10, bottom: 30, left: 10}, width = 500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;var rectangles = d3.range(5).map(function() { return { x: Math.round(Math.random() * (width)), y: Math.round(Math.random() * (height)) };}); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // var drag_handler = d3.drag()// .on("start", drag_start)// .on("drag", drag_drag); var defs = svg.append("defs"); var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); linearGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#da75ff"); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#0d0089"); var group = svg.selectAll('g') .data(rectangles) .enter().append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged)); group.append("rect") .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("height", 60) .attr("width", 120) .style("fill", "url(#linear-gradient)") // var rectangle = svg.append("rect")// .attr("x", 10)// .attr("y", 10)// .attr("width", 300)// .attr("height", 100)// .style("fill","url(#linear-gradient)")// .call(drag_handler); // var rectangle2 = svg.append("rect")// .attr("x", 200)// .attr("y", 500)// .attr("width", 300)// .attr("height", 100)// .style("fill","url(#linear-gradient)")// .call(drag_handler); function dragstarted(d) { d3.select(this).raise();}function dragged(d) { d3.select(this).select("rect") .attr("x", d.x = d3.event.x) .attr("y", d.y = d3.event.y);} </script></body> https://d3js.org/d3.v4.min.js