如何使用 d3 js 设置样式表的属性？

【问题标题】：How to set property of style sheet using d3 js?如何使用 d3 js 设置样式表的属性？
【发布时间】：2016-01-03 06:46:24
【问题描述】：

如何使用 d3 js 为 "labelwebmetro.com" 类设置opacity:1。

<g class="circle" transform="translate(686.7254745357253,1011.2761564139669)">
<text x="12" dy=".35em" class="labelwebmetro.com" style="opacity: 0;">webmetro.com</text>
<circle style="fill: rgb(255, 127, 14);" r="40" class="circlewebmetro.com"/>
</g>

【问题讨论】：

标签： d3.js

【解决方案1】：

你可以在选择器上使用selection.style，

d3.select("g text.myClass").style("opacity", 1);

问题是类名labelwebmetro.com 可能不起作用，因为它包含一个点（。）但是你可以试一试。如果您可以以某种方式将其替换为更干净的东西，那就太好了。除了带有点（。）的类名我相信不支持跨浏览器。

看看这个how to use a CSS class with a dot。

【讨论】：

【解决方案2】：

d3.select 选择具有给定条件的第一个元素。在这种情况下，我们正在寻找具有类特定类的文本。然后 style 函数修改选择的样式。

d3.select('text.labelwebmetro.com').style('opacity', 1.0);

如果你想改变每个类labelwebmetro.com的元素，那么你可以这样做

d3.selectAll('.labelwebmetro.com').style('opacity', 1.0);

【讨论】：