Question

我有一些圆圈用于散点图：

baseGroup.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr({
                    "cx": function(d) {return xScaleScatter(d.xAxis2013);},  
                    "cy": function(d) {return yScaleScatter(d.yAxis2013)},  
                    "r": function(d) {return rScaleScatter(d.radius2013)},
                    "class": "circle"
                })

当我点击一个按钮时，我希望圆圈的cx，cy和r属性随着一组新数据而改变使用此功能：

function reDrawCircles(theXaxis, theYaxis, theRadius){
       d3.selectAll("circle").attr({
                    "cx": function(d) {return xScaleScatter(theXaxis);},  
                    "cy": function(d) {return yScaleScatter(theYaxis)},  
                    "r": function(d) {return rScaleScatter(theRadius)}
       })
}

这是我的click事件，它调用reDrawCircles函数并将参数（新数据集）作为字符串传递。我不确定这些是字符串的事实是函数不起作用的原因，但是如果参数没有引号那么它们应该是变量，我也不想要它们。有没有更好的方法来编写这个函数？

$(".2014button").click(function(){
    reDrawCircles("d.xAxis2014", "d.yAxis2014", "d.radius2014");})

Answer 1

如果2014年的值与2013年的数据集位于同一数据集中，则根本不需要将它们传递给点击处理程序。该数据已经与圈子绑定。相反，你可以这样做：

$('.2014button').click(function() {
  d3.selectAll('circle')
    .attr({
      "cx": function(d) {return xScaleScatter(d.xAxis2014);},  
      "cy": function(d) {return yScaleScatter(d.yAxis2014);},  
      "r": function(d) {return rScaleScatter(d.radius2014);}
    });
});

编写一个更改圆属性的函数

1 个答案: