Question

我使用此功能附加了很多圈子和svg

function makeCircles(){
    svg.selectAll("circle")
        .data(companies)
        .enter()
        .append("circle")
        .attr("r", 7)
        .attr("class", "company")
        .attr("cx",0)
        .attr("cy",0);
}

我有另一个函数可以沿x和y标度转换cx和cy。我通过这个函数将数据数组（即公司）中的数字用于计算cx和cy

function moveCircles(theX, theY){
    svg.selectAll("circle.company")
        .transition()
        .duration(1000)
        .attr("cx",function(d,i){return x(d[theX])})
        .attr("cy",function(d,i){return y(d[theY])});
}

所以在我的脚本中我首先打电话给makeCircles(); 然后我打电话给moveCircles("marketCapX","marketCapY"); 这似乎工作正常。它将左上角的圆圈移动到svg上的斑点超过一秒钟。但是我有一个再次调用moveCircles()的按钮。这次传递新数据，例如：moveCircles("femaleX","femaleY")。但是这一次，当我打电话给moveCircles("marketCapX","marketCapY")时，圆圈到达最后一个圆圈的末尾。我希望圈子根据他们的新数据重新排列。我如何让它工作？

D3.JS：如何转换圈子的cx和cy属性

0 个答案: