Question

我正在使用SVG样式将css属性应用于元素。代码段如下：

        var groups = svg.selectAll("g")
            .data(dataset)                
            .enter()                
            .append("g")
            .style("fill", function(d, i) {
                return colors(i) ; // colors object has some data already                
        }

但是，这是一种属性样式，将被某些外部css文件覆盖。我无法改变那个外部的CSS。有没有办法让这个＆＃34; SVG.style＆＃34;是一个内联风格？所以它不会被覆盖。

感谢您的帮助。

Answer 1

重写CSS的方式通常是使用style属性。

<rect style="fill: red;" ... />

请参阅以下演示：

＆＃13;

d3.selectAll("rect").style("fill", "green");

＆＃13;

rect {
  fill: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
  <rect width="100" height="100"/>
</svg>

＆＃13;

但那就是你在做什么，所以还有别的东西必须继续下去。

您正在将样式应用于<g>元素，因此CSS可能会覆盖它，因为它具有更具体的特征。换句话说，它可能直接针对孩子而不是父母群体。

您的解决方案也将更加具体。定位要更改的元素，而不是其父组。

＆＃13;

d3.selectAll("g *").style("fill", "green");

＆＃13;

rect {
  fill: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
  <g>
    <rect width="100" height="100"/>
  </g>
</svg>

＆＃13;

我使用SVG样式将css属性应用于元素。代码段如下：

1 个答案: