Question

我正在尝试在分区图中更改特定路径的样式。这是代码的Link。

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

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

现在，当范围符合条件时，我想在该路径中添加一些样式，如不透明度或颜色。但是得到错误对象＃没有方法'样式'。在这里我不确定这样做的正确方法是什么。任何人都可以帮助改变特定路径的风格吗？

Answer 1

试试这段代码：

<强> DEMO

function changeStyle(){

d3.selectAll('path')
.each(function(pat,i){
    if(inRange(pat)){
         d3.select(this).style('opacity', 0);
    }
  });
}
function inRange(pat){
    if(pat.size>7000 && pat.size<7500){
        return true;
    }
    return false;
}

Answer 2

这里接受的答案并不合适。在这种情况下使用path[0][i]代替工作，但可能会在多个父母的选择中中断。从each()函数中操作DOM元素的惯用d3方法是：d3.select(this)。 this对象是与给定数据关联的<path>元素。

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

See jsFiddle

如果你想直接操纵元素，就像Manoj建议的那样，你会使用this.style.opacity="0"。

最后，您可以使用each：

，而不是使用filter

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

See Demo

Answer 3

你试过.attr("opacity", "1")吗？

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

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

并在您的CSS文件中：

path.in-range {
  opacity: 1;
}

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

3 个答案: