在自定义d3 html元素中使用Angular Controller Scope数据

Question

我不了解如何将自控制器中的选定数据作为自定义HTML类（d3）中的数据属性传递。它总是被解释为url：http://localhost:63343/Frontend/%7B%7BselectedSpeaker.replicas_length_list%7D%7D' 404 (Not Found)

列表存在且包含一行整数。

我知道，这可能是对如何使用{{}}的误解。

顺便说一句，我将本教程用于d3条形图：http://phloxblog.in/angulard3/start.html

我的HTML：

<div ng-app="seriesAnalyzer" ng-controller="singleSpeakerController">

......

        <div id="speaker-info-grafics" class="row" ng-if="selectedSpeaker">
            <div class="col-md-6"">
                <bargraph id="d3bar" data={{selectedSpeaker.replicas_length_list}}'
                          xaxis-name="'Year'"
                          xaxis-pos="'905'"
                          yaxis-name="'Frequency'"
                          yaxis-pos="12"
                          d3-format="'.0%'">
                </bargraph>
            </div>
            <div class="col-md-6">
                bla
            </div>
        </div>
    </div>

我的D3 Bar指令：

var BarGraph = Class.create({
    initialize: function(data,xaxisName,xaxisPos,yaxisName,yaxisPos,d3Format) {
        this.data = data;
        this.xaxisName = xaxisName;
        this.xaxisPos = xaxisPos;
        this.yaxisName = yaxisName;
        this.yaxisPos = yaxisPos;
        this.d3Format = d3Format;
    },
    workOnElement: function(element) {
        this.element = element;
    },
    generateGraph: function() {
        //d3 specific coding
        var margin = {
                top: 20, right: 20, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var formatPercent = d3.format(this.d3Format);

        var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

        var y = d3.scale.linear()
            .range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(formatPercent);

        var svg = d3.select(this.element).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.json(this.data, function(error, data) {
            if (error) return console.warn(error);
            //c

onsole.log(this.xaxisName);
            x.domain(data.map(function(d) { return d.letter; }));
            y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("x", this.xaxisPos)
                .attr("dx", ".71em")
                .style("text-anchor", "end")
                .text(this.xaxisName);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", this.yaxisPos)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text(this.yaxisName);

            svg.selectAll(".bar")
                .data(data)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("x", function(d) { return x(d.letter); })
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.frequency); })
                .attr("height", function(d) { return height - y(d.frequency); });
        }.bind(this));
    }
});

angular.module('my-directives').directive('bargraph', function () { // Angular Directive
    return {
        restrict: 'E', // Directive Scope is Element
        replace: true, // replace original markup with template
        transclude: false, // not to copy original HTML DOM
        compile: function (elem, attrs) {// the compilation of DOM is done here.
            // It is responsible for produce HTML DOM or it returns a combined link function
            // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
            console.log(attrs.id);
            console.log(attrs.data);
            var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
            var newElem = $(html);
            elem.replaceWith(newElem); // Replacement of the element.
            var ourGraph = new BarGraph(attrs.data,attrs.xaxisName,attrs.xaxisPos,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
            ourGraph.workOnElement('#'+attrs.id);
            // Work on particular element
            ourGraph.generateGraph();  // generate the actual bar graph
        }
    }
});