Question

我有一个简单的指令，用于呈现d3 svg词云。

该指令应仅在桌面上可见，因此我使用bootstrap类在移动设备上将其删除：＆＃34; xs-hidden＆＃34;

问题是浏览器标签卡住了，因为angular可能会查找指令，但无法找到它。

我修改并添加了指令范围的render方法，当我们打电话时，标签卡住了

 layout.start();

仅当使用＆＃34; hidden-xs＆＃34;

隐藏div时

**标签卡住意味着 - 它只是显示＆＃34; loading＆＃34;页面已加载但页面卡住了，我无法刷新，我需要关闭标签页。

一些代码：

 link: function(scope, element, attrs) {

      //stuff....
      scope.render(['word', 'word2']);

      scope.render = function(words) {
                if (!words || !words.length) return;

                var maxSize = d3.max(words, function(d) { return d.count; });
                var minSize = d3.min(words, function(d) { return d.count; });
                var fontScale = d3.scale.linear()
                    .domain([minSize, maxSize])
                    .range([16, 40]);

                var layout = d3.layout.cloud()
                    .size([svgWidth, 350])
                    .words(words.map(function(d) {
                        return {text: d.word, size: d.count};
                    }))
                    .padding(10)
                    .rotate(function() { return 0; })
                    .font("Arvo")
                    .fontSize(function(d) { return fontScale(d.size) })
                    .fontWeight(700)
                    .spiral('rectangular')
                    .on("end", draw);


                //when this is called the tab get stuck and must be closed
                layout.start();

                function draw(words) {
                    //dont care
                }
            }

Answer 1

您是否检查过DOM中是否存在需要呈现文字云的元素？

你提到的课程有：

LineGraphSeries series = new LineGraphSeries<>(new DataPoint[]{
                    new DataPoint(0.5, 0.1)
            });

当您尝试渲染单词云时，元素可能不在DOM中。

角度指令d3隐藏在移动设备上时卡住了

1 个答案: