在Web应用程序中以交互方式绘制图表

Question

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

我的想法是，当用户完成绘图后，我可以从图表中生成数据点并进行处理。

我不知道从哪里开始，我希望在基于JS的框架（流星）中开始学习这个，但我找不到允许这样的东西的库。我找到的最近的图书馆是d3.js，但我找不到任何允许这样做的例子。

有人能够向我指出一个示例示例吗？你知道一个更适合的图书馆来完成我的要求吗？

Answer 1

Here是一个相对简单的小提琴，可以完成你所要求的一些内容，不包括轴（相对容易且有很多例子）。它使用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();，以防止意外突出显示页面。< / p>