- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我将解释我在实际项目中遇到的问题。我正在使用 Web 服务,这会返回 n 个点 x、y。我正在使用 settimeout 模拟 Web 服务。我想在这些坐标中放一个圆圈,我想为每个圆圈画一条连接它们的线。像这样:
我想在圆圈之间添加一条线,但要显示动画。像这样:
http://bl.ocks.org/duopixel/4063326
例如这个动画,但是一点一点
当我运行我的应用程序时,我希望该行具有从初始圆圈到结束的动画。如果我添加一个新圆圈,我想创建一条线并为圆圈添加动画。我该怎么做?
var svg = d3.select('svg');
var dataSet = [10, 20, 30, 40];
function display(data){
var circle = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
r:function(d){ return d },
cx:function(d, i){ return i * 100 + 50 },
cy:50,
fill: 'red'
});
}
display(dataSet);
setTimeout(function(){
display([5]);
},2000)
最佳答案
回答如何连接点:
要创建连接您的圈子的路径,您只需创建一个使用相同数据的线生成器。
例如,这将创建一个包含 10 个对象的数组,每个对象都有一个 x
和一个 y
位置:
var dataSet = d3.range(10).map(function(d) {
return {x: someValue, y: someValue}
});
因此,由于我们使用这些属性来定位圆圈,我们只需在直线生成器中使用相同的属性:
var lineGenerator = d3.svg.line()
.x(function(d) {return d.x})
.y(function(d) {return d.y})
.interpolate("monotone")
然后,使用您链接的 bl.ocks 中的函数:
var totalLength = path.node().getTotalLength();
path.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
这是演示:
var svg = d3.select('svg');
var backLayer = svg.append("g");
var frontLayer = svg.append("g");
var dataSet = d3.range(10).map(function(d) {
return {
x: d * 30 + 10,
y: Math.random() * 130 + 10
}
});
var lineGenerator = d3.svg.line()
.x(function(d) {
return d.x
})
.y(function(d) {
return d.y
})
.interpolate("monotone")
function displayCircles(data) {
var circle = frontLayer.selectAll(null)
.data(data)
.enter()
.append('circle')
.attr({
r: 6,
cx: function(d) {
return d.x
},
cy: function(d) {
return d.y
},
fill: 'white',
stroke: "black",
"stroke-width": "3px"
});
};
function displayLine(data) {
var line = backLayer.append("path")
.datum(data)
.attr({
d: lineGenerator(data),
fill: 'none',
stroke: "red",
"stroke-width": "3px",
"shape-rendering": "geometricPrecision"
});
var totalLength = line.node().getTotalLength();
line.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
}
displayCircles(dataSet);
setTimeout(function() {
displayLine(dataSet)
}, 1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>
关于javascript - 在 d3.js 中从一个圆圈画一条线到另一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46386640/
如何迭代(一行)分割函数给我的每个类? 我试过这个: 编辑(抱歉) $("p").attr("class").split(' ').each (function (i,n){alert(n)}
我有一条垂直线和一条水平线,当我动态调整我的 Canvas 父级时,我想调整它们的大小。 (地标) 我希望水平线始终距 Canvas 的左右边界 25 处,距底部边界 13 处。 垂直线也是如此,距上
我有一个 y 变量,我试图在图形的顶部和底部针对两个相关的 x 轴绘制它(例如 y="立方体中的事物数",x1="立方体的边长", x2="立方体的体积")。我在 numpy 数组中有 y、x1、x2
我想画一条简单的水平线,并在这条线 flex 的地方制作动画。我有这个动画的视频。你能给我一些建议如何开始以及我必须使用哪个 js/css 吗? 都是关于矩形底部的线: http://www.stop
我是一名优秀的程序员,十分优秀!