实现svg路径的常规更新模式

时间:2016-06-28 05:20:03

标签: angularjs d3.js

我有一个自定义图表,在页面加载时加载了一些初始值。当事件发生时,我会用一些显示某些趋势的指示箭头更新图表。 d3部分位于角度指令内,当从页面的各个部分更改数据集时,该指令获取其更新的数据。我目前似乎工作,但很少有路径元素没有出现。我想知道我是否搞砸了一般更新模式

我具有常规更新模式的部分的片段

ngApp.directive("customChart", function ($window) {
    return {
        restrict : "A",
        template : "<svg width='320' height='200'></svg>",
        scope : {
            data : "=chartData"
        },
        link : function (scope, elem, attrs) {
            scope.line = {
                /*line function*/
            };
            scope.setChartDimensions = function () {
                // . . .
            }
            scope.render = function (dataset) {
                aData = dataset.arrows ? dataset.arrows : undefined;
                // . . . 
                if (arrowData) {
                    // . . . 
                    var path = svg
                        .selectAll("path")
                        .data(pathCoordinates, function (d) {
                            return d;
                        });

                    path.enter()
                    .append("path")
                    .attr("d", function (d) {
                        return scope.line(d) + "Z";
                    })
                    .attr("class", "enter");

                    path.exit().remove();
                }
            }
            scope.$watchCollection('data', function (newValue, oldValue) {
                scope.render(newValue);
            });
            scope.setChartDimensions();
        }
    }
}

当事件发生时,某些箭头数据未被识别为新的或某些东西,并且尽管当时数据可用,但这些箭头仍未被渲染。

完整代码的小提琴:https://jsfiddle.net/animeshb/tbpnx0xd

0 个答案:

没有答案