调用函数为每个数据设置一次 D3 SVG 矩形属性

Question

我有这个 D3 代码片段，它从数据中提取 table。

self.displayStateTable = function (stateTable) {
    d3.select('#VisualizationSVG')
    .selectAll('rect').data(stateTable).enter().append('rect')
    .attr({
        x: function (d, i) { return self.positionStateTableTile(d).x; },
        y: function (d, i) { return self.positionStateTableTile(d).y; },
        width: self.stateTableConfig.TileWidth,
        height: self.stateTableConfig.TileHeight,
        fill: function (d, i) { return self.positionStateTableTile(d).fill; }
    });
};

函数 positionStateTableTile 计算出每个数据块的 x 位置、y 位置和填充，每个数据需要运行三次运行 =]一次。我怎样才能改变这个，让 D3 只为每个数据调用一次 positionStateTableTile 而不是三次？

Answer 1

典型 - 问题一发布，答案就显而易见了！

我可以运行首先为每个数据执行一次函数，然后将结果存储在一个数组中，然后使用它来设置 D3 中的属性。

self.displayStateTable = function (stateTable) {
    var i = 0, stateTableTilePositions = [];
    for (i = 0; i < stateTable.length; i++) {
        stateTableTilePositions[i] = self.positionStateTableTile(stateTable[i]);
    }
    d3.select('#VisualizationSVG')
    .selectAll('rect').data(stateTable).enter().append('rect')
    .attr({
        x: function (d, i) { return stateTableTilePositions[i].x; },
        y: function (d, i) { return stateTableTilePositions[i].y; },
        width: self.stateTableConfig.TileWidth,
        height: self.stateTableConfig.TileHeight,
        fill: function (d, i) { return stateTableTilePositions[i].fill; }
    });
};

调用函数为每个数据设置一次 D3 SVG 矩形属性

Call function to set D3 SVG rect attributes just once for each datum

d3.js