javascript - 在 Web 应用程序中交互式绘图

Question

我正在寻找一个最好用 JavaScript 编写的库，它允许用户绘制一个图(由垂直和水平步骤组成的简单图)，如下所示:

这个想法是，当用户完成绘图后，我可以从图表中生成数据点并处理它们。

我不知道从哪里开始，我希望开始学习在基于 JS 的框架(meteor)中执行此操作，但我找不到允许此类操作的库。我发现的最接近的库是 d3.js，但我找不到任何允许这样做的示例。

有人可以向我指出一个示例吗？您知道有一个更适合的库来完成我的要求吗？

Answer 1

Here是一个相对简单的 fiddle ，它可以完成您所要求的一些功能，不包括 axis (相对简单并且有很多示例)。它使用 D3 进行所有绘图和鼠标事件处理。单击后，它只需执行 svg.append("circle").attr("r", 5) ，如果不是第一次点击(即链接点)，那么它也会创建一个 path使用先前鼠标单击坐标的元素:

svg.insert("path", "circle").attr("d", function () {
        return [
            "M", prevClickLoc[0], prevClickLoc[1],
            "L", prevClickLoc[0], y,
            "L", x, y].join(" ");
    })

哪里x和y是当前鼠标坐标。还有一个导出按钮，会以 cx,cy,cx,cy,... :: d,d,d,d,... 的形式输出列表。 。导入时，您可以使用 indexOf("::") 轻松地将这个数组分成两个。或者如果您想更改格式，您可以选择任何内容。然后执行 for (x in circles) {svg.append("circle").attr("cx", function...).attr("cy", function...);}并对路径 for (y in paths) {svg.append("path").attr("d", function(){return paths[y];});} 执行类似的操作。如果在导出时您制作了cxcy，那就更容易了格式为 cx;cy,cx;cy 的数组从那时起你就可以简单地 split每个逗号处的数组，然后在分号处分割结果数组的每个索引，以获得一个漂亮的嵌套数组。

Small update在此版本中，只有当当前鼠标 x 大于先前的 x 坐标时，您才能放置点，并且它还有线 d3.event.stopPropagation();这可以防止页面意外突出显示。