相关疑难解决方法(0)

我正在使用D3制作和弦图.

我试图这样做,以便当用户点击链接时,数据集将更改为另一个预定义的数据集.我已经查看了http://exposedata.com/tutorial/chord/latest.html和http://fleetinbeing.net/d3e/chord.html,并尝试使用其中的一些元素来使其工作.

以下是用于创建"默认"图表的JavaScript:

var dataset = "data/all_trips.json";

var width = 650,
    height = 600,
    outerRadius = Math.min(width, height) / 2 - 25,
    innerRadius = outerRadius - 18;

var formatPercent = d3.format("%");

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
    .padding(.03)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

var svg = d3.select("#chart_placeholder").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 1.5 + "," + height / 1.75 + ")");

svg.append("circle")
    .attr("r", …

我是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])]);
    }

以上是曲线的参数化 - 在这种情况下,也是一个圆 - 我希望我的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);
            }

[旁白:我听说队列()会更好,而不是计算总延迟.注释？]然而,过渡的缓和属性使它以波涛汹涌的方式运行.我想我可以指定没有缓和,但我确信必须有更好的方法来实现我想要的,这只是初始DOM对象(圆圈)沿着特定轨迹平滑移动.

最后,我想对多个DOM对象执行此操作,这些对象最终将链接到数据,每个对象都有一个特定的曲线.有关如何做到这一点的任何提示？

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