D3.js - Y轴上ScatterPlot上的数据的多个系列(列)

时间:2012-11-20 13:57:10

标签: graph d3.js scatter-plot

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

我正在根据以下数据开发一个散点图(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)机制根据新的比例重新调整以前的绘图?

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

0 个答案:

没有答案