小编sin*_*095的帖子

使用ngFor索引增加[ngStyle] attr?

我正在尝试使用ngFor动态创建多个元素,然后根据绘制的数量设置top属性.

我想知道是否有办法在ngStyle的同一div上访问ngFor的索引?即;

<div class="row" *ngFor="let d of data; let i = index;" [ngStyle]="{'top': mrTop*i}" >

如果没有,任何建议如何我可以实现类似的东西?

我宁愿避免添加另一个div;

<div *ngFor="let d of data; let i = index;">
  <div class="testCase" [ngStyle]="{'top': mrTop*i}">{{d}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

(虽然这也不起作用)

我想知道是否有办法将事件监听器附加到循环事件,以便在幕后我可以mrTop为每个绘制的div 增加变量?

无论如何,我不确定如何最好地接近这一点,并希望得到一些帮助/建议.

插在这里

javascript typescript angular

9
推荐指数
1
解决办法
1234
查看次数

打字稿中防止"使用严格"?

尝试在iOS设备上加载我的应用时出现以下错误;

VMundefined bundle.js:1722 SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

这个错误发生在iPhone 5s/6s +我试过的几个不同的iPad上(不记得哪个).它也没有在HTC上工作.我试过的任何三星/ Windows手机都没有出现此错误.它也适用于台式机.(我还没试过在Mac上运行它).

这是bundle.js中的那行代码;

{}],12:[function(require,module,exports){
"use strict";
const guage_1 = require("./charts/kpi/guage");
const stacked_1 = require("./charts/area/stacked");
const barChart_1 = require("./charts/compare/barChart");
Run Code Online (Sandbox Code Playgroud)

当我从bundle.js中删除"use strict"时,它可以在所有设备上正常工作.只是想知道是否有办法确保打字稿不能使用"use strict"编译或修复iOS设备的问题?

这是我编译的gulpfile(按照typescripts 网站上发布的指南)

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    source = require('vinyl-source-stream'),
    tsify = require('tsify'),
    browserSync = require('browser-sync'),
    postcss = require('gulp-postcss'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    watchify = require("watchify"),
    browserify = require('browserify'),
    gutil = require("gulp-util"),
    buffer = …
Run Code Online (Sandbox Code Playgroud)

typescript

8
推荐指数
1
解决办法
6594
查看次数

使用新数据更新/修改d3字云

我试图弄清楚如何使用d3.js wordcloud从一系列数据中修改和更新.

目前,我根据索引键显示选择数据的前10个结果.我希望能够根据键切换这些数据,或者如果我想要前10个或后10个单词.

这是迄今为止的一个方面;

http://plnkr.co/edit/cDTeGDaOoO5bXBZTHlhV?p=preview

我一直在尝试参考这些指南,一般更新模式,III和动画d3文字云.但是,我很难理解如何引入最终更新功能,因为几乎所有引用它的指南通常都使用setTimeout来演示如何更新,而我的大脑就不会进行连接.

欢迎任何建议!

干杯,

(代码在这里)

var width = 455;
var height = 310;
var fontScale = d3.scale.linear().range([0, 30]);
var fill = d3.scale.category20();

var svg = d3.select("#vis").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
    // .selectAll("text")

d3.json("data.json", function(error, data) {
    if (error) {
        console.log(error)
    }
    else {
        data = data
    }

    function sortObject(obj) {
        var newValue = [];
        var orgS = …
Run Code Online (Sandbox Code Playgroud)

javascript word-cloud d3.js

5
推荐指数
0
解决办法
916
查看次数

如何在更新d3.js图表​​之前干净地删除数据?

我对D3相当陌生,并且一直在努力解决所有问题。我正在尝试在此处配置此示例,以使用新数据进行更新并进行适当的过渡。

这是我配置的代码笔(单击提交进行更新) http://codepen.io/anon/pen/pbjLRW?editors=1010

据我所知,干净的数据转换需要使用.exit()的一些变体,但是在阅读了一些教程之后,我仍然很难知道它是如何工作的。我已经看到了一些示例,这些示例在调用draw函数之前先删除容器即可,但是根据我的有限经验,更改数据时可能会导致闪烁,因此我不确定这是否是最佳做法?

现在,我不确定为什么在Codepen中数据无法正确更新,但是我主要关心的是尝试正确过渡。理想情况下,我想知道如何在更改数据时移动针,因此它会从90> 40开始,而不是90> 0> 40。

但是,我一定会弄清楚为什么一旦单击链接的Codepen中的Submit后,它为什么不会在同一位置重新绘制自身。

这是我的更新功能;

function updateGuage() {
  d3.selectAll("text").remove()
  d3.selectAll('.needle').remove()
  chart.remove()
  name = "qwerty";
  value = "25";
  drawGuage();
}
Run Code Online (Sandbox Code Playgroud)

初始抽奖;

function drawGuage() {
  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  // Create SVG element
  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  // Add layer for …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

5
推荐指数
1
解决办法
2833
查看次数

标签 统计

javascript ×3

d3.js ×2

typescript ×2

angular ×1

word-cloud ×1