陷入D3 + Angular指令代码

时间:2017-12-11 22:36:54

标签: angularjs d3.js angularjs-directive

我是Directive和D3的新手,我试图将这个D3脚本包装成一个自定义指令,这个d3脚本从csv文件加载数据并在html上创建一个表:

当它不在Angular中时它工作正常但是它没有加载ng-bind(并且(也试图使用{{}}表达式工作的问题也不起作用):

d3.text("data.csv", function (data) {
                var parsedCSV = d3.csv.parseRows(data);

                var container = d3.select("#chart")
                    .append("table")
                    .attr("class", "chartable")
                    .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")
                    .selectAll("td")
                    .data(function (d) { return d; }).enter()
                    .append("td")
                    .text(function (d) { return d; })

                d3.select(".chartable")
                .selectAll("tr")
                .append("td")
                .attr("ng-bind", "addedDays")


                d3.select("#chart").append("br")
                d3.select("#chart").append("br")

            });

在指令包装版本中(不工作):

app.directive("dataTable", function ($parse) {
var directiveDefinitionObject1 = {
    restrict: 'E',
    replace: false,
   // scope: { data: '=tableData' },
    link: function () {

        d3.text("data.csv", function (data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("#chart")
                .append("table")
                .attr("class", "chartable")
                .selectAll("tr")
                .data(parsedCSV).enter()
                .append("tr")
                .selectAll("td")
                .data(function (d) { return d; }).enter()
                .append("td")
                .text(function (d) { return d; })

            d3.select(".chartable")
            .selectAll("tr")
            .append("td")
            .attr("ng-bind", "addedDays")


            d3.select("#chart").append("br")
            d3.select("#chart").append("br")

        });

    }
};

return directiveDefinitionObject1;

});

HTML:

<div ng-controller="Ctrl1">
    <data-table>
        <div id="chart" >
</div>

    </data-table>
</div>

我这样做的原因是因为我想在D3中使用ng-bind(或角度表达式)。

我做错了什么?

0 个答案:

没有答案