- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个更新非常好的折线图。直到新数据进入问题。那时,“更新”选择会按应有的方式向下动画,但新数据不会。
很难解释发生了什么,但是一张 gif 抵得上一千个字(注意它何时过渡向下):
我已经使用更新和渲染方法将图形包装在一个类中。这是我编写的渲染方法。
render(){
// Update both Axes
this.xAxis.transition()
.call( d3.axisBottom( this.xScale ) );
this.yAxis.transition()
.call( this.createYAxis );
// Exit
this.line.exit().remove();
// Enter
this.line
.enter().append( 'path' )
.attr( 'class', 'valueLine' )
.transition()
.attr( 'd', this.valueLine );
// Update
this.line.transition().attr( 'd', this.valueLine );
// Allows method chaining
return this;
}
为什么"new"数据没有动画显示?
最佳答案
是的,但是您必须为 d
属性定义起始值。
从起始值到目标值的转换。现在,在您的“输入”选择中,d
属性没有起始值(即,在 transition()
之前):
// Enter
this.line
.enter().append( 'path' )
.attr( 'class', 'valueLine' )
.transition()//no 'd' attribute before this line
.attr( 'd', this.valueLine );
因此,该路径的 d
属性为 null
(阅读有关此 in this answer 的更多信息)。
让我们看看:
var data = [10, 180, 30, 60, 190, 180, 50, 110, 40, 90, 90];
var svg = d3.select("svg");
var lineGenerator = d3.line()
.y(function(d) {
return d
})
.x(function(d, i) {
return i * 60
});
var path = svg.selectAll(null)
.data([data])
.enter()
.append("path");
console.log(path.attr("d"))
path {
fill: none;
stroke-width: 2px;
stroke: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="200"></svg>
这里是相同的代码,设置d
属性:
var data = [10, 180, 30, 60, 190, 180, 50, 110, 40, 90, 90];
var svg = d3.select("svg");
var lineGenerator = d3.line()
.y(function(d) {
return d
})
.x(function(d, i) {
return i * 60
});
var path = svg.selectAll(null)
.data([data])
.enter()
.append("path")
.attr("d", lineGenerator);
path {
fill: none;
stroke-width: 2px;
stroke: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="200"></svg>
回到你的问题:
您不能将 d
属性从 null
转换为您的字符串。不可能。不过,有一些可能的解决方法。
其中之一是在转换之前创建一个默认的 d
属性。例如:
var data = [10, 180, 30, 60, 190, 180, 50, 110, 40, 90, 90];
var svg = d3.select("svg");
var lineGenerator = d3.line()
.y(function(d) {
return d
})
.x(function(d, i) {
return i * 60
});
var path = svg.selectAll(null)
.data([data])
.enter()
.append("path")
.attr("d", "M0,100 L600,100")
.transition()
.duration(2000)
.attr("d", lineGenerator);
path {
fill: none;
stroke-width: 2px;
stroke: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="200"></svg>
但这是一个可怕的转变!问题是初始的d
属性点数太少。因此,字符串插值器无法创建我们希望的插值。
因此,我们可以使用自定义函数,例如 this one来自迈克博斯托克。这是演示:
var data = [10, 180, 30, 60, 190, 180, 50, 110, 40, 90, 90];
var svg = d3.select("svg");
var lineGenerator = d3.line()
.y(function(d) {
return d
})
.x(function(d, i) {
return i * 60
});
var path = svg.selectAll(null)
.data([data])
.enter()
.append("path")
.attr("d", "M0,100 L600,100")
.transition()
.duration(2000)
.attrTween("d", function(d) {
return pathTween(lineGenerator(d), 4, this)()
});
function pathTween(d1, precision, self) {
return function() {
var path0 = self,
path1 = path0.cloneNode(),
n0 = path0.getTotalLength(),
n1 = (path1.setAttribute("d", d1), path1).getTotalLength();
// Uniform sampling of distance based on specified precision.
var distances = [0],
i = 0,
dt = precision / Math.max(n0, n1);
while ((i += dt) < 1) distances.push(i);
distances.push(1);
// Compute point-interpolators at each distance.
var points = distances.map(function(t) {
var p0 = path0.getPointAtLength(t * n0),
p1 = path1.getPointAtLength(t * n1);
return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
});
return function(t) {
return t < 1 ? "M" + points.map(function(p) {
return p(t);
}).join("L") : d1;
};
};
}
path {
fill: none;
stroke-width: 2px;
stroke: teal;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="200"></svg>
关于javascript - 折线图的 'enter' 选择是否可以设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47363028/
我已经禁用了回车键,以便可以执行 ajax 提交,但我想确保如果用户在服务器响应返回之前按两次回车键,则表单不会提交两次。 这里我禁用了回车键并为其分配了一个名为 submitForm() 的函数:
我正在尝试将 $animate 服务合并到我自己的指令中。我无法进入并离开以实际设置动画。 奇怪的是,使用$animate.enter,元素附加到DOM,回调函数触发。但似乎从未添加 ng-anima
如果 ,我如何检查 Bash输入 键被按下了? 我正在使用读取命令: read -p "Please press ENTER" var 最佳答案 首先检查退出状态是否正常($?应该为0)。 其次,检查
在我的 PreviewKeyDown() handler 如何区分数字键盘上的 ENTER 键和主板上的 ENTER 键? 两个键返回相同的值 Key.Enter为 KeyEventArgs.Key
这个问题已经有答案了: How do I detect "shift+enter" and generate a new line in Textarea? (19 个回答) 已关闭10 年前。 我正
我的问题与这个 question 有点相关.但是,我没有奢侈去监听 submit 事件,所以这个问题的答案对我来说不起作用。 我的问题:是否可以在 Javascript 中检测日文/中文建议菜单何时打
我希望能够在不需要实现新类的情况下修改 wpf 文本框的行为。 我想要一个类似 Enter/Alt+Enter 行为的 Excel,当用户点击“Enter”时,文本框被验证(movefocus ...
在 Chrome 中的 contenteditable 中按 Enter 时,会插入一个 div。这会干扰我的标记,我需要它成为 br。 我知道shift-enter是一个br。解决问题的最佳方法是什
我正在使用$('.inputs').keydown(function (e) { if (e.which === 13) {到达下一个输入字段。但是每次我按 enter/return 转到下一个输入字
我有一个 textarea ,其中当您单独按 Enter 时,jquery ajax 会启动,但我想添加一个功能,即当您按 Enter + Shift 时仅转到新行并且不启动ajax。你能指导一下吗?
场景如下: 有一个密码字段,我可以在其中输入文本(这是使用 sendKeys 完成的) 现在,没有提交/输入按钮 所以我必须按 Enter 键并登录应用程序 以下是我搜索并尝试但没有成功的几种方法:
这是我尝试过的,但显然失败了: ed.on('keyup', function(e){ console.log(e.keyCode) if(e.keyCode == 13 && !e.
所以我有一个带有 jQuery 的表单,可以阻止用户使用 Enter 键提交表单。 这是代码: $(document).ready(function() { // code prevent
有人知道如何在Javascript中检测按键代码“+1 Enter”和“-1 Enter”吗?我想检测何时一一按下键码而不是一次按下键码。 但是当我编写以下代码时,没有给出任何效果。 // +1 en
我想添加 shift + enter 键转到下一行,只需 enter 键 即可使用 JAVASCRIPT 触发提交按钮仅。 如何实现? 我也想提交多行文本......提前致谢 function typ
int DisplaySchedule() { int nDisplaySchedule_Choice; system("cls"); printf("----- DISPLA
在 textarea 中,当用户按下 Shift+Enter 时,它应该在下一个新行继续,当他简单地按下 Enter 时,它应该提交表单而不使用提交按钮。 这是 Fiddle!! 我浏览了很多但对我没
我有以下简单的 我还有以下 jQuery/JavaScript 代码块: $('textarea#streamWriter').keydown(function (e) { if (e.k
我有许多将转换为HTML的Word文档。要求单词文档中的段落应转换为元素。 在使用Microsoft Office API的SaveAs方法进行了一些测试以将文档转换为HTML之后,我意识到带有手动换
终端是否可以检测 ⇧ Shift+Enter↵ 或 Ctrl+Enter↵ 按键? 我正在尝试配置 vim 来执行使用这些序列的键映射,虽然它们在 gvim 中工作正常,但它们似乎在任何终端控制台中都
我是一名优秀的程序员,十分优秀!