Question

我想知道是否可以多次在同一元素上使用样式操作？我得到了这个名为A的数组，它存储了3种颜色，我想通过一个填充我元素链接的循环。

var A = ["blue", "red", "green"]

    for ( var i = 0; i < A.length; i++){


                link.style("stroke", function(d) 
                {

                   return A[i];



                 }
                 ) 
                };

Answer 1

根据选择中元素/基准的索引，为每个链接设置不同的样式。与d3中的许多内容一样，这不需要循环。您可以使用以下代码访问每个数据的索引：

selection.attr("property",function(d,i) {
  return array[i];
})

为了方便起见，我使用了一些圆圈并填充而不是链接和笔划，但方法是相同的。下面的代码段将根据颜色数组顺序为链接着色。

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
var data = [[50,50],[100,50],[200,50],[300,100]];
var colors = ["steelblue","orange","pink","red"]

// create some circles:
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("transform",function(d) { return "translate("+d+")"; })
  .attr("r",10)
  
// to style sequentially, you can use the datum's index:
circles.attr("fill",function(d,i) {
  return colors[i];
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

使用循环在D3中设置样式？

1 个答案: