Как переопределить встроенный стиль, применив новый класс в D3

Все:

Я использовал D3, чтобы добавить стиль к элементу SVG, например:

svg.append("rect")
   .attr("id", "testclass")
   .classed("hascolor", true)
   .style("fill", "red");

Затем я определяю другой класс:

.nocolor{
    fill: transparent;
}

И когда я хочу применить этот класс для изменения стиля, например:

svg.select("#testclass")
   .classed("nocolor", true);

Класс RECT изменился, но стиль не применялся (он работает только тогда, когда я использую JS для прямого изменения стиля). Интересно, может ли кто-нибудь помочь с этим, чтобы включить изменение стиля по классам?

Спасибо


javascript svg css d3.js
person Kuan    schedule 27.04.2015    source источник
comment
вы можете применить класс с помощью svg.select('#testclass').attr('class', 'nocolor');   -  person tomtomtom    schedule 27.04.2015
comment
или используйте правило !important, которое не идеально, но переопределяет встроенные стили, например .nocolor{fill: transparent !important;}   -  person Maciej Kwas    schedule 27.04.2015
comment
@tomtomtom спасибо, но добавление класса не работает на моей стороне   -  person Kuan    schedule 27.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

Встроенные стили имеют приоритет над стилем CSS.

(Я знаю, что, возможно, именно эта часть кода не будет работать в вашем случае, но предназначена только для демонстрационных предложений). Вот пример Jquery, в котором вы можете проверить приоритет стиля над встроенным стилем, первый класс, который применяет правило, и второй класс, который применяет правило с !important.

HTML:

 <div id='theOne' style="color: green;" class="colorRed"> Something that needs to be colored </div>

CSS:

.colorRed {
    color: red;
}
.colorBlack {
    color: black!important;
}

Jquery:

$('#theOne').addClass('colorBlack');

Скрипка

Итак, возможные решения вашей проблемы:

1) Добавьте правило fill: Transparent как атрибут 'style'.

2) Используйте класс css вместо стиля атрибута на первом шаге.

3) Добавьте !important в правило css.

person ecarrizo    schedule 27.04.2015
comment
Спасибо, причина, по которой я не могу использовать два класса, заключается в том, что мне нужно динамически определять стиль в первой ситуации. - person Kuan; 27.04.2015
comment
Ok. Поэтому вам нужно переопределить атрибут 'style' элемента или добавить !important к правилу css (это будет работать только в том случае, если элемент не имеет значения! в правиле стиля, которое он применил). см. предложение № 3 и обновленный код для класса .colorBlack - person ecarrizo; 27.04.2015

arrow_upward
0
arrow_downward

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

Первое, что пришло в голову:

.nocolor{
    fill: transparent !important;
}

or

svg.select("#testclass").style("fill", "transparent");
person Maciej Kwas    schedule 27.04.2015