Получите определенное значение класса css, используя d3js

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> 

Затем добавили декларацию CSS, что у вас есть в вашем вопросе, но не был в jsfiddle, но изменилась из 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'); 
} 

Эта функция просто захватывает элемент на основе имени класса, который вы предоставляете в качестве аргумента, а затем захватывает значение CSS в color. Вы можете увидеть, что было бы легко заменить color, если вы хотите получить другое значение свойства или даже добавить значение свойства в качестве второго аргумента функции, но я не видел необходимости в этом в этом примере.

Надеюсь, что это поможет, и если это не совсем то, что вам нужно, я извиняюсь, вопрос был немного трудным для толкования. Не стесняйтесь добавлять комментарий или редактировать, чтобы уточнить вопрос, и я обновлю ответ, чтобы приблизиться к тому, что вам нужно (если бы я на этот раз не наделал его).

EDIT

OP разъяснено, что они ищут лучший способ для хранения значений цвета и полагал, что это будет в CSS. Я бы сказал, что это не лучший способ сохранить значения цвета и рекомендовать хранить их в объекте в javascript, так как они нужны только в javascript. Вот обновленная скрипка, которая хранит цвета в лучшей стороне:

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

Если изменить colors.blue к colors.red вы увидите, что вы можете легко переключаться между различными цветами, а синтаксис является родным для JavaScript так или иначе.