相关疑难解决方法(0)

在jsfiddle中加载外部csv文件

我正在尝试为其中一个dc.js示例创建一个jsfiddle.我无法使用URL加载外部文件d3.csv().

有人可以建议如何使用d3.csvjsfiddle 加载csv文件.

jsfiddle d3.js dc.js

19
推荐指数
1
解决办法
6416
查看次数

跟踪DOM对象的路径

我是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对象执行此操作,这些对象最终将链接到数据,每个对象都有一个特定的曲线.有关如何做到这一点的任何提示?

在此先感谢您的帮助,我很乐意接受任何建议,包括参考.

javascript svg dom d3.js

3
推荐指数
1
解决办法
1674
查看次数

D3:打字机样式的文本转换

在此jsfiddle,标签通过减少旧文本的字体从一个文本转换到另一个文本,并反过来增加新文本的字体.

但是,我希望新的文本以"打字机"的方式上传,就像在这里一样jsfiddle.如何编写自定义D3文本插补器,以这种"打字机"方式启用文本转换?

javascript interpolation label transition d3.js

3
推荐指数
1
解决办法
867
查看次数

d3.js圆形绘图在第一次尝试加载时无法正常工作

这是我的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)

javascript svg d3.js

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

标签 统计

d3.js ×4

javascript ×3

svg ×2

dc.js ×1

dom ×1

interpolation ×1

jsfiddle ×1

label ×1

transition ×1