通过拖动边缘调整饼图切片大小答案

【问题标题】：Adjust pie chart slice size by dragging the edge通过拖动边缘调整饼图切片大小
【发布时间】：2011-12-07 19:49:59
【问题描述】：

我正在尝试调整 Raphaël 网站上不断增长的 pie 演示，以满足我自己的需要。 http://raphaeljs.com/growing-pie.html

演示几乎是完美的，但我希望用户能够拖动切片的边缘来调整它们的大小，而不是点击它们。这不仅更直观，而且允许精确调整大小，而不是演示中的阶梯式方法。

我该怎么做呢？提前致谢。

【问题讨论】：

不容易。您需要单独的“饼片边缘”对象来捕获拖动事件和一些三角函数来计算新切片一旦被放下时的角度。玩得开心！
一般来说这是最聪明的方法，还是仅仅因为我正在调整这段代码？它不一定是“成长派”演示的确切代码。
绘制对象很容易，确定规则并创建 UI 以拖动切片的边缘以增加其大小是困难的部分。我认为这个不断增长的饼图演示是一个很好的起点——它相当简单，并展示了如何捕获切片的单击事件，您需要扩展它以便可以捕获边缘上的拖动开始/鼠标向下事件。
这个运气好吗？我将探索在 d3.js 之上实现这一点
我最终放弃了我的天上掉馅饼的梦想，并做了一个界面，允许用户循环切片并通过键盘控制增加/减少切片。如果你有幸使用 d3.js 制作出更壮观的东西，请随时告诉我：)

【解决方案1】：

尝试从不同的 UI 角度来处理您的解决方案。用户是否必须操纵 PI？或者，PI 能否代表用户的反应？向用户询问百分比或其他值……然后以交互方式绘制 UI。这样就无需为每个触发的 mousemove 事件（基本上）持续计算鼠标移动的每个像素的值。

【讨论】：

同意。拖动饼图很有趣，但不是特别有用。众所周知，人类是不精确的，尤其是在鼠标移动方面。图表可能代表什么样的数据？
图表可以代表任何数据。重要的是如何以一种对他们有意义的方式以一种直接而精确的方式呈现用户输入。不是试图回避问题......而是说明答案完全取决于用户期望的响应。

【解决方案2】：

我会考虑为此使用GSAP。它有一个Raphaël plugin 和一个Directional Rotation plugin。

【讨论】：