Question

我对d3.js提出了一个小问题。在这个例子中，我可以点击一个节点，它会检查数组＆＃34; a＆＃34;我之前创建过，得到了元素＆＃34; element1＆＃34;如果是，则将节点之间链路的笔划宽度调整为22px，其他节点调整为3px。

现在，这是我的问题。我现在想要只操纵这些新的分离的薄的，行程宽度为3px。我现在怎么才能访问这些？我应该将它们存储在一个额外的阵列中吗？

例如，我可以创建一个新按钮，如果我点击它，它将只将这些尺寸为3px的链接变为绿色，但不要触摸其他链接。

on("click", function(d, i){
    links.style("stroke-width", function(d){
                   return a.includes(d.element1) ? "22px" : "3px"; 
                });........

Answer 1

您可以按属性选择元素。

d3.selectAll('line[stroke-width="3px"]')

Answer 2

我想我现在可能会理解。您使用@EricGuan解决方案时遇到的问题是，当您使用样式笔划宽度时，他会通过属性笔划宽度进行选择。我认为你最好的选择是.filter：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width','500px')
        .attr('height', '500px');
        
      var data = d3.range(10);
      
      var links = svg.selectAll('.link')
        .data(data)
        .enter()
        .append('path')
        .attr('d', function(d){
          return "M0," + (d * 50 + 3) + "L500," + (d * 50 + 3);
        })
        .style("fill", "none")
        .style("stroke", "steelblue")
        .style("stroke-width", function(d){
          return Math.random() > 0.5 ? '10px' : '3px';
        });
    
      links.filter(function(d){
        return this.style.strokeWidth === '3px';
      })
      .transition()
      .duration(2000)
      .style('stroke-width', '23px');
      
    </script>
  </body>

</html>

＆＃13;

d3.js中的单独元素是否需要阵列？

2 个答案: