我正在尝试为其中一个dc.js示例创建一个jsfiddle.我无法使用URL加载外部文件d3.csv().
有人可以建议如何使用d3.csvjsfiddle 加载csv文件.
我是javascript和d3js的新手.我想要一个DOM对象来追踪由参数化曲线(x(t),y(t))指定的路径.以下是此类参数化的示例:
var theta = [];
for(var i = 0; i <= N; i++){
theta.push(2*Math.PI*i/N);
}
var points = [];
for(var i = 0; i <= N; i++){
points.push([Math.cos(theta[i]),Math.sin(theta[i])]);
}
Run Code Online (Sandbox Code Playgroud)
以上是曲线的参数化 - 在这种情况下,也是一个圆 - 我希望我的DOM对象遵循这条曲线的轨迹.[旁白:有没有更好的方法来定义points?运行for循环似乎很荒谬.]
实现我正在寻找的那种效果的粗略方法是在d3的update()部分中运行for循环.首先,我只是在svg变量上附加一个圆圈,这样就不需要将它链接到任何数据.然后选择并更新它,无需进入/退出.
for (var i = 0; i <= N; i++){
svg.selectAll("circle")
.transition()
.attr("cx",points[i][0]+w/2) // w: width
.attr("cy",points[i][1]+h/2) // h: height
.duration(dt) //
.delay(dt*i);
}
Run Code Online (Sandbox Code Playgroud)
[旁白:我听说队列()会更好,而不是计算总延迟.注释?]然而,过渡的缓和属性使它以波涛汹涌的方式运行.我想我可以指定没有缓和,但我确信必须有更好的方法来实现我想要的,这只是初始DOM对象(圆圈)沿着特定轨迹平滑移动.
最后,我想对多个DOM对象执行此操作,这些对象最终将链接到数据,每个对象都有一个特定的曲线.有关如何做到这一点的任何提示?
在此先感谢您的帮助,我很乐意接受任何建议,包括参考.
这是我的d3.js代码段:
<script>
var width = 300,
height = 300,
margin = 20;
var x_centre = width/2;
var y_centre = height/2;
var nuclear_radius = 15;
var vis = d3.select("#chart_container").append("svg:svg")
.attr("width", width)
.attr("height", height);
var radiuses = [1,2,3];
var multiplier = (d3.min([width, height]) - 2*margin - nuclear_radius) / (d3.max(radiuses) * 2);
var shells = vis.selectAll("circle.shell")
.data(radiuses)
.enter().append("circle")
.attr("class", "shell")
.attr("cx", x_centre)
.attr("cy", y_centre)
.attr("r", function(d, i) {
return (d * multiplier);
});
var nucleus = vis.selectAll('circle.nucleus')
.data(['nucleus'])
.enter().append("circle")
.attr("class", "nucleus")
.attr("cx", x_centre) …Run Code Online (Sandbox Code Playgroud)