使用 d3js 获取 css 类的特定值

Question

我有一个 HTML 表格，我想设置表格特定部分的颜色（分类为“第一”的单元格的边框顶部颜色）。 要获得颜色，我需要访问 css 类中的特定值。

例子：

表格

<table class="tabla">
    <caption>Title</caption>
      <tr>
        <td class="first">A</td>
        <td class="first">157</td>
      </tr>
</table> 

CSS 这是我需要能够获得颜色的类

.color { fill: #95ccee;
         background-color: #95ccee;
         }

为了实现，我按照下面的方式使用d3.js

var selectTablas = d3.selectAll (".tabla");
    selectTablas.selectAll(".first")
                .style("border-top-color", "Here the function that will get the color");

该函数应循环数据集，并根据“d”获取不同类的不同值。

这里是扩展代码

http://jsfiddle.net/ploscri/dHYcd/

提前致谢。

Answer 1

好的，这是我的第一次尝试。这个问题不是很清楚，但是这个函数为您提供了一种将类名传递给它并检索该类的颜色的方法。我用您在问题中的颜色更新了您的示例。我假设您在其他地方有一个函数可以将差异值映射到类名。

http://jsfiddle.net/dHYcd/1/

我在这里做的第一件事是制作一个包含用于测试的颜色的隐藏类的容器。为了从 css 中获取值，它需要存在于 html 中，我假设它已经在某个地方。如果不是，我不知道您为什么要这样做，而不仅仅是在 javascript 中定义颜色。

<div id='colors'>
    <span class='color1'></span>
</div>

接下来，添加您在问题中但不在 jsfiddle 中的 css 声明，但将 fill 和 background-color 更改为 color。我还确保隐藏了包含颜色的 div，因此它不会干扰示例。

#colors { display: none }
#colors .color1 { color: #95ccee }

最后，从类中实际获取颜色的函数相当简单。代码转载如下：

function get_color(classname){
    var el = document.querySelector('#colors .' + classname);
    return getComputedStyle(el).getPropertyValue('color');
}

这个函数只是根据你作为参数提供的类名抓取一个元素，然后抓取color的css值。您可以看到，如果您想获得另一个属性值，或者甚至将属性值作为第二个参数添加到函数中，很容易换出 color，但我认为不需要这样做例子。

希望这会有所帮助，如果这不是您想要的，我很抱歉，这个问题有点难以解释。随意添加评论或编辑以澄清问题，我会更新答案以更接近您所追求的（如果我这次没有确定的话）。

编辑

OP 澄清说，他们正在寻找存储颜色值的最佳方法，并认为它会在 css 中。我会说这不是存储颜色值的最佳方式，并建议将它们存储在 javascript 中的对象中，因为它们仅在 javascript 中需要。这是一个更新的小提琴，它以更好的方式存储颜色：

http://jsfiddle.net/dHYcd/2/

如果您将colors.blue 更改为colors.red，您会发现您可以轻松地在不同颜色之间进行切换，而且语法是javascript 原生的。