多个nvd3图形和选择问题

Question

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

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

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

现在，当我将“select”替换为“selectAll”时，每个图都被重新定位。

我想分开定位它们，即“翻译”坐标在不同情况下会有所不同。我将如何实现这一目标？谁能帮忙？ （“.nv-pieWrap”） .attr（“transform”，“translate（0，-35）”）;

Answer 1

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

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)'; 
        } 
       }); 
   

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

   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)");