Question

我尝试使用d3.js和外部json文件制作气泡图。我使用angular来根据复选框显示/隐藏气泡。

这是我的复选框的代码：

var app = angular.module('myApp', [ 'pascalprecht.translate']);
app.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {
    $scope.wifiCheckbox = true;
    $scope.bluetoothCheckbox = true;
    $scope.jpurseCheckbox = true;
}

我的HTML看起来像这样：

<html id="myAppHtml"  ng-app="myApp" ng-controller="Ctrl">
<head>
    //heading stuff
</head>
<body>

    <div id="bubblemap">
    </div>


    <div id="checkboxGroup">
        <div class="checkbox">
            <label><input ng-model="wifiCheckbox" type="checkbox" value="">{{"CHECKBOX1"| translate}}</label>
        </div>
        <div class="checkbox">
            <label><input ng-model="bluetoothCheckbox" type="checkbox" value="">{{"CHECKBOX2"| translate}}</label>
        </div>
        <div class="checkbox">
            <label><input ng-model="jpurseCheckbox" type="checkbox" value="">{{"CHECKBOX3"| translate}}</label>
        </div>
    </div>
</body>

这就是我制作气泡图的地方：

var bubbleData = {};

bubbleData.svg = d3.select("#grondplan")
        .append('svg')
        .attr('width', "800px")
        .attr('height', "550px");






bubbleData.setData = function (data) {
    bubbleData.data = data;

    bubbleData.readXML();
    bubbleData.doTheRest();
};

//ajax call to the data
getDataPerSensor(bubbleData.setData);


//reads the svg file containing an image of the map
bubbleData.readXML = function () {
    d3.xml("images/FloorplanScanners.svg", function (error, xml) {
        if (error)
            throw error;
        var importedNode = document.importNode(xml.documentElement, true);
        var clone = importedNode.cloneNode(true);
        document.querySelector("svg").prepend(clone);
    });
};

//make the circles according to the data
bubbleData.doTheRest = function () {
    bubbleData.maxRadius = d3.max(bubbleData.data, function (d) {
        return d.visitors;
    });
    var circleGroups = bubbleData.svg.selectAll('.circleGroup')
            .data(bubbleData.data)
            .enter().append("g")
            .attr("class", function (d) {
                return "circleGroup " + d.type;
            })
            .attr("fill", "#d40000")
            .attr("ng-show", function (d) {
                return d.type + "Checkbox";
            });

    var circles = circleGroups.append("circle")
            .attr("cx", function (d) {
                return d.cx;
            })
            .attr("cy", function (d) {
                return d.cy;
            })
            .attr("r", 50)
            .attr("id", function (d) {
                return d.location;
            })
            .attr("fill-opacity", 0.5);

    var texts = circleGroups.append("text")

            .attr("id", function (d) {
                return d.locatie + "text";
            })
            .attr("text-anchor", "middle")
            .attr("x", function (d) {
                return d.cx;
            })
            .attr("y", function (d) {
                return d.cy;
            })
            .attr("stroke", "#000000")
            .attr("stroke-width", "1px")
            .attr("dy", ".3em")
            .text("{{ 'WEBSITETITLE' | translate }}");

};

我用javascript文件顶部的一些dummydata制作了这张地图，一切正常。然而，现在我们通过ajax调用访问数据（在稍后阶段将调用另一个服务器）。

function getDataPerSensor(callback) {
 $.getJSON("../../json/dataPerSensor.json", function(json){
    callback(json);
          });
}

我现在遇到以下问题：doTheRest（）函数创建的text / circle / g元素的数据绑定不起作用。 ng-show连接正确，但是当勾选复选框时，组不会隐藏。我更改了代码中的最后一行以测试翻译是否有效，但似乎也失败了。我已经添加了一些结果图片。

bubble error

resulting html

正如您所看到的，使用正确的属性正确添加了元素，看起来角度只是没有正确连接它们。奇怪的是，其他一切都很好。所有翻译都有效，当我更改复选框旁边的标签以显示复选框的当前状态时，它们也是正确的。

<div id="checkboxGroup" class="bg-white">
    <div class="checkbox">
        <label><input ng-model="wifiCheckbox" type="checkbox" value="">{{wifiCheckbox}}</label>
    </div>
    <div class="checkbox">
        <label><input ng-model="bluetoothCheckbox" type="checkbox" value="">{{bluetoothCheckbox}}</label>
    </div>
    <div class="checkbox">
        <label><input ng-model="jpurseCheckbox" type="checkbox" value="">{{jpurseCheckbox}}</label>
    </div>
</div>

（我无法发布图片，只有2个链接允许，直到我有10个声望）

再一次：一切顺利，直到我通过ajax调用更改了要接收的数据。我相信，因为获取数据需要一些时间，所以在页面加载完成后会添加元素，并以某种方式导致engular绑定失败。但是，我还没有找到解决方案。

有人可以帮我吗？

非常感谢

编辑：对于迟到的反应感到抱歉，时间不多了，制作小提琴时遇到了一些麻烦。终于来了：https://jsfiddle.net/3b03gfrr/18/

角度数据绑定不适用于使用d3.js添加的元素

0 个答案: