Question

我在同一页面中有多个nvd3饼图。现在当我尝试定位它们时，单独使用下面的代码

d3.select(".nv-pieWrap")
    .attr("transform", "translate(0,-35)");

只有页面中的第一个图表才会重新定位。在nvd3支持文档中说，如果在多个函数中使用select关键字，则只选择页面中的第一个元素。

现在当我更换＆＃34;选择＆＃34;使用＆＃34; selectAll＆＃34;，每个图表都会重新定位。

我想将它们分开定位，即＆＃34;翻译＆＃34;坐标在不同情况下会有所不同。我怎么做到这一点？有人可以帮忙吗？

d3.selectAll（＆＃34; .NV-pieWrap＆＃34） .attr（＆＃34; transform＆＃34;，＆＃34; translate（0，-35）＆＃34;）;

Answer 1

我有两个问题的解决方案。

一种解决方案是您可以将'transform'属性指定为常量“translate（0，-35）”而不是函数。在函数中，根据图表的索引决定您需要哪些坐标：

d3.selectAll(".nv-pieWrap")
   .attr("transform", function(d, i) { 
      // i is a chart index
      if (i === 0) {
         return 'translate(0,-35)';
      } else {
         return 'translate(100,-35)';
      }
   });

另一种解决方案是包装你的代码

d3.select(".nv-pieWrap")
   .attr("transform", "translate(0,-35)");

进入转换函数，该函数将节点和变换作为参数，例如

var transform = function(chart, transform) {
   return  
    d3.select(chart)
      .attr("transform", transform); 
}
draw("#pieChart1", "translate(0,-35)");
draw("#pieChart2", "translate(100,-35)");

多个nvd3图表和选择问题

1 个答案: