Question

这个问题的主题可能不会给出真实的情况，请阅读以下所有内容，谢谢。

我正在根据以下数据开发一个散点图（JSON - 在一个文件simple.json中）：

{
    "docs":
        [
            {"timestamp":"01","id":"100","quantity":"5","pay":"50","bp":"25","city":"Multan"},
            {"timestamp":"02","id":"200","quantity":"10","pay":"100","bp":"50","city":"Lahore"},
            {"timestamp":"03","id":"300","quantity":"3","pay":"30","bp":"15","city":"Multan"},
            {"timestamp":"04","id":"400","quantity":"5","pay":"50","bp":"25","city":"Multan"},
            {"timestamp":"05","id":"500","quantity":"6","pay":"60","bp":"30","city":"Lahore"},
            {"timestamp":"06","id":"600","quantity":"15","pay":"150","bp":"75","city":"Islamabad"},
            {"timestamp":"07","id":"700","quantity":"14","pay":"140","bp":"70","city":"Islamabad"},
            {"timestamp":"08","id":"800","quantity":"18","pay":"180","bp":"90","city":"Islamabad"},
            {"timestamp":"09","id":"900","quantity":"7","pay":"70","bp":"35","city":"Lahore"},
            {"timestamp":"10","id":"1000","quantity":"20","pay":"200","bp":"100","city":"Islamabad"}
        ]
}

我正在尝试开发一个可重用的图表，我可以向用户显示可用的数据列（来自上面的数据）。因此，用户可以为X轴选择某个列（比如“id”），为Y轴选择另一个列（比如说“数量”）（直到这里一切都很完美，并按照预期）。之后用户可以选择另一列，并可以单击按钮在图表上绘制该列（以及之前添加的列）。

问题出现了：

当我继续使用Y轴的另一列（比如说“付费”），同时保留之前的图表时，新的列正确绘制（我也根据新数据重新调整轴）。但旧的不会重新安排。这是实际问题。我想跟踪添加的每一列（通过在单独的数组中存储列引用），所以每次有一个新列时，我将不得不重新绘制旧列（我应该吗？）。但就D3的功率或性能而言，这看起来并不可行。

为此，我还对所绘制的每个圆圈应用了一个匿名类“更新”，以便我可以选择所有“更新”圈子，但这里有另一个问题，我怎么知道这些圈子的新地方？我是否需要再次遍历该特定系列的数据？并且必须再次绘图？对于每个新系列，跟踪旧系列并重新绘制它们，将逐步增加处理开销。是否有任何方便的解决方案或内置（d3）机制根据新的比例重新调整以前的绘图？

请提出建议。我相信我缺少一些关键点。

D3.js - Y轴上ScatterPlot上的数据的多个系列（列）

0 个答案: