Question

假设我有以下dc.js对象：

var chart_11   = dc.barChart("#chart-11"),
    chart_12   = dc.barChart("#chart-12"),
    chart_13   = dc.barChart("#chart-13"),
    chart_21   = dc.barChart("#chart-21"),
    chart_22   = dc.barChart("#chart-22"),
    chart_23   = dc.barChart("#chart-23");

接下来，我读入一些数据并对这些数据进行一些处理：

d3.csv("../data/test_data.csv").then(function(data) {

    var var_names = ["x", "y", "z", "a", "b", "c"];

    var ndx = crossfilter(data),
        chart_11_dim = ndx.dimension(function(d) { return +d[var_names[0]]; }),
        chart_12_dim = ndx.dimension(function(d) { return +d[var_names[1]]; }),
        chart_13_dim = ndx.dimension(function(d) { return +d[var_names[2]]; }),
        chart_21_dim = ndx.dimension(function(d) { return +d[var_names[3]]; }),
        chart_22_dim = ndx.dimension(function(d) { return +d[var_names[4]]; }),
        chart_23_dim = ndx.dimension(function(d) { return +d[var_names[5]]; });

    var chart_11_min = +chart_11_dim.bottom(1)[0][var_names[0]],
        chart_11_max = +chart_11_dim.top(1)[0][var_names[0]],
        chart_12_min = +chart_12_dim.bottom(1)[0][var_names[1]],
        chart_12_max = +chart_12_dim.top(1)[0][var_names[1]],
        chart_13_min = +chart_13_dim.bottom(1)[0][var_names[2]],
        chart_13_max = +chart_13_dim.top(1)[0][var_names[2]],
        chart_21_min = +chart_21_dim.bottom(1)[0][var_names[3]],
        chart_21_max = +chart_21_dim.top(1)[0][var_names[3]],
        chart_22_min = +chart_22_dim.bottom(1)[0][var_names[4]],
        chart_22_max = +chart_22_dim.top(1)[0][var_names[4]],
        chart_23_min = +chart_23_dim.bottom(1)[0][var_names[5]],
        chart_23_max = +chart_23_dim.top(1)[0][var_names[5]];

});

虽然可行，但不是很干燥，也不容易保持水垢。我知道必须有一种更好的方法来动态创建这些变量，但是我不确定哪种方法（例如循环，映射，缩减）可能会最佳扩展。我不经常使用javascript编写代码，因此希望有经验的人可以为我指明正确的方向。

Answer 1

您可以创建一个帮助程序文件，以将变量导出为javascript模块。

因此，在名为“ data.js”的模块文件中，您可以：

export const chart11   = dc.barChart("#chart-11"),
    chart12   = dc.barChart("#chart-12"),
    chart13   = dc.barChart("#chart-13"),
    chart21   = dc.barChart("#chart-21"),
    chart22   = dc.barChart("#chart-22"),
    chart23   = dc.barChart("#chart-23");

然后，当您需要在someotherfile.js中引用数据时，可以使用：

import {chart11, chart12, chart13, chart21, chart22, chart23} from '../data';

const chart11Min = chart11...

Idk（如果您完全在节点中工作），但这是整个节点环境中使用的模块模式。这允许单个模块声明，并根据需要提供对该模块的多个导入引用。旁注，建议将const用于常量变量，将let用于动态变量。由于缺乏区分性，var关键字不是最佳实践。

如何以可扩展的方式分配JavaScript变量

1 个答案: