Javascript 在自定义d3 html元素中使用角度控制器范围数据

我不知道如何在自定义HTML类（d3）中将所选数据作为数据属性从控制器传递。它总是被解释为url:

http://localhost:63343/Frontend/%7B%7BselectedSpeaker.replicas_length_list%7D%7D'404（未找到）

该列表存在并包含一行整数

我知道，这可能是对如何使用

{{}

的错误理解

顺便说一下，我在d3条形图中使用了本教程：

我的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>

......
在您的指令中，您正在执行
replace:true
那么将数据作为DOM中的表达式有什么用呢？好的，这是另一个好问题。我刚刚找到了这个示例，用于条形图的固定json数据。我想我也要重做一下。无论如何，除了这个，我怎么能把数据放进去呢？数据从来不会像这样作为属性放进去。数据应该在范围内。@Igle我有点困惑。是
selectedSpeaker.replications\u length\u list
数据还是文件名？在您的指令中，您正在执行
replace:true
那么将数据作为表达式放入DOM有什么用呢？好的，这是另一个好问题。我刚刚找到了这个示例，用于条形图的固定json数据。我想我也要重做一下。无论如何，除了这个，我怎么能把数据放进去呢？数据从来不会像这样作为属性放进去。数据应该在范围内。@Igle我有点困惑。是否选择了扬声器。复制副本\u长度\u列表

数据或文件名？

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