"D3.js Advanced Series-6.2" pie chart drag and drop

This article explains some of the more complicated drag-and-drop applications that drag the parts of a pie chart.

In "Getting Started-Chapter 9.1" explains how to make a pie chart. The portions of the pie chart are represented by arcs with widths. It is interesting to be able to drag and drop each part when interacting with the user.

1. Rendering of pie charts

Slightly different from "Getting Started-Chapter 9.1", we use a G-tag to enclose each area of the pie chart for panning operations.

var gAll = Svg.append ("G")  . attr ("transform", "Translate (" +outerradius+ "," +outerradius+ ")");  var arcs = Gall.selectall (". Arcs_g").  data (Pie (DataSet)).  Enter ()  . Append ("G")  . each (function (d) {                                                        //Specify the translation amount of the current region D.DX = 0;d.dy = 0;  })  . Call (drag);      Call the Drag function

So when panning, you only need to use transform for each part of the G. When the drag event occurs, the offset is calculated based on the mouse's parameters. The above uses a each () function to add two variables for each region: DX and dy. Used to save offsets.

2. Definition of the Drag event

Each time the drag event is triggered, we just need to get the mouse offset and add it to the original offset dx and dy.

Then use D3.select (this) to select the current element and apply the transform to it to complete the panning operation.

var drag = D3.behavior.drag (). Origin (function (d) {return D;}). On ("Drag", DragMove), function DragMove (d) {d.dx + = D3.event.dx;d.dy + = D3.event.dy;d3.select (this). attr ("Transform", " Translate ("+d.dx+", "+d.dy+");}

3. Results

As a result, each chunk of a pie chart can be dragged and dragged:

Source code click on the following link to view:

Http://www.ourd3js.com/demo/J-6.2/dragpie.html

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: January 6, 2015
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Advanced Series-6.2" pie chart drag and drop