如何更改分区图（D3.js）中特定路径的样式

我正在尝试更改分区图中特定路径的样式。下面是代码的示例

在这里，单击按钮m调用函数changeStyle，其中m选择所有路径并迭代它们以获得给定范围之间的路径

function changeStyle(){
    d3.selectAll('path')
    .each(function(path){
        if(inRange(path)){
            path.style('opacity', 1);
        }
    });
}
function inRange(path){
    if(path.size>7000 && path.size<7500){
        return true;
    }
    return false;
}

现在，当范围满足条件时，我想为路径添加一些样式，如不透明度或颜色。但m getting error对象没有“style”方法。在这里，我不确定做这件事的正确方法是什么。有人能帮您更改该特定路径的样式吗？

您试过了吗。1

此外，当您想要更改SVG对象的样式时，最好影响特定类并使用CSS自定义它们，如中所示：

path.attr("class", "in-range");

在CSS文件中：

path.in-range {
  opacity: 1;
}

请尝试以下代码：

---

这里公认的答案并不十分恰当。在这种情况下，使用路径[0][i]代替路径[0][i]是可行的，但可能会中断多个父级的选择。从each函数中操作DOM元素的惯用d3方法是：d3.selectthis。该对象是与给定基准关联的元素

d3.selectAll('path')
  .each(function(pat,i){
    if(inRange(pat)){
      d3.select(this).style('opacity')[0]
    }
  });

如果您希望像Manoj建议的那样直接操纵元素，您可以使用这个.style.opacity=0

最后，您可以使用过滤器，而不是使用每个过滤器：

---

如果我在做d3，得到相同的错误对象时，两种情况下都没有“attr”方法。选择all'path'。样式为'opacity'，0.1；它可以工作，但在迭代时就不行了。您已经定义了Path，所以在每个函数中可以使用除Path之外的任何变量名。这不是一个合适的解决方案。您不应该直接引用路径[0][i]，也不必这样做。您可以使用此对象的。

d3.selectAll('path')
  .each(function(pat,i){
    if(inRange(pat)){
      d3.select(this).style('opacity')[0]
    }
  });

d3.selectAll('path')
  .filter(inRange)
  .style('opacity', 0)