我正在尝试使用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 增加变量?
无论如何,我不确定如何最好地接近这一点,并希望得到一些帮助/建议.
尝试在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) 我试图弄清楚如何使用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) 我对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)