Question

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

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; }
    });
};

当每个数据只需要运行一次时，每个数据的x位置，y位置和填充的函数positionStateTableTile运行三次。如何更改此值，以便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 rect属性

1 个答案: