javascript - 可重复使用的 D3 图表，其中公共(public)代码被分离出来

Question

我有一个使用此处概述的框架的工作 D3 折线图:http://bost.ocks.org/mike/chart/

由于我正在创建很多图表，因此我想将常见元素(例如宽度和高度)分离到一个单独的文件中，但我不太确定如何在可重用框架内做到这一点。

这是调用的 javascript 文件:

var common = commonChart()
    .main_height(400)
    .main_width(600);

var chart = multiLineChart()
    .x(function(d) { return d.date; })
    .y(function(d) { return d.number; })
    .yLabel("Number")
    .dimKey(function(d) { return d._id.env; })
    .yTickFormat(function(d) { return d3.round(d); })
    .yScale(d3.scale.sqrt())
    .color(d3.scale.category10());

d3.json('data/datafile.json', function(data) {
    d3.select("#graph")
        .datum(data)
        .call(common)
        .call(chart);
});

通用文件是这样的:

function commonChart() {

    var main_width, main_height;

    function chart(selection) {

        console.log(main_height);

    }

    // Get/set main_width
    chart.main_width = function(value) {
        if (!arguments.length) return main_width;
        main_width = value;
        return chart;
    }

    // Get/set main_height
    chart.main_height = function(value) {
        if (!arguments.length) return main_height;
        main_height = value;
        return chart;
    }

}

multiLineChart 拥有折线图本身的所有核心逻辑。当我运行这个时，我最终得到Cannot read property 'main_height' of undefined。有没有办法使用可重用图表框架通过 D3 来做到这一点？

谢谢!

Answer 1

我最近也遇到了同样的问题。构建图表库，并且在制作新类型的图表时不想复制粘贴所有常见属性。

这是我想出的解决方案:

Chart = function module() {
        // properties
        this._width = 800;
        this._height = 600;
        this._margin = {
            top: 10,
            bottom: 10,
            left: 20,
            right: 5
        };
        this._title = '';
    }

    // doing stuff
    Chart.prototype.plot = function () {
        console.log('The plot function has not been defined.');
    }

    // setting the properties
    Chart.prototype.width = function (_x) {
        if (!arguments.length) return this._width;
        this._width = _x;
        return this;
    }
    Chart.prototype.height = function (_x) {
        if (!arguments.length) return this._height;
        this._height = _x;
        return this;
    }
    Chart.prototype.margin = function (_x) {
        if (!arguments.length) return this._margin;
        this._margin = _x;
        return this;
    }
    Chart.prototype.title = function (_x) {
        if (!arguments.length) return this._title;
        this._title = _x;
        return this;
    }

    // creating a new type of chart, which inherits from Chart.
    BarChart.prototype = new Chart(); // Here's where the inheritance occurs 
    BarChart.prototype.constructor = BarChart;
    BarChart.prototype.parent = Chart.prototype;

    function BarChart() {
    }
    // 'overriding' the .plot function
    BarChart.prototype.plot = function (_selection) {
        var myTitle = this.parent.title.call(this);
        _selection.each(function (_data) {
            console.log('Plotting ' + _data.length + ' bars of data. The chart is called: ' + myTitle);
        });
    }

    
    
    // usage
    var myBarChart1 = new BarChart();
    myBarChart1.width(250)
        .height(200)
        .title('Population Growth');
    myBarChart1.plot(d3.select("#chart").datum([1, 2, 3, 4, 5, 6])); // Plotting 6 bars of data. The chart is called: Population Growth

    var myBarChart2 = new BarChart();
    myBarChart2.width(50)
        .height(500)
        .title('Music Sales');
    myBarChart2.plot(d3.select("#chart").datum([1, 2, 3, 4])); // Plotting 4 bars of data. The chart is called: Music Sales

 <div id="chart"></div>

这意味着我只需创建一次通用属性，例如宽度和高度，而不是在我创建的每种类型的图表中。生成的对象调用可以链接起来，如 d3.js。唯一与 d3.js 用法不一致的是，您必须调用 .plot() 函数来实际绘制图表。我一直无法弄清楚如何直接从 BarChart 函数调用它(我尝试从 BarChart 返回绘图函数，但这不起作用)。

如果您想围绕这个主题阅读，这里有一篇关于 JavaScript 继承的非常棒的文章:http://phrogz.net/JS/classes/OOPinJS2.html