Добавление / удаление класса с D3

Question

Следующие два вопроса больше связаны с CSS, чем с D3.

let svg = d3.select('body')
            .append('svg');
svg.append('circle')
   .attr('cx', 100)
   .attr('cy', 100)
   .attr('r', 50)
   .attr('class', ball)
   .on('mouseenter', function() {
       d3.select(this)
         .classed('over', true);
   });

circle.ball {
    fill: blue;
}
circle.ball over {
    fill: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Если в приведенном выше коде я пишу

circle {
    fill: blue;
}

вместо

circle.ball {
    fill: blue;
}

, тогда Круг изначально заполнен синим цветом. Почему установка класса ball не влияет на заливку?

Мне известна опция :hover CSS. Далее я хотел бы внести изменения, используя событие mouseenter и настройку класса. Когда событие инициируется, дополнительный класс over настраивает fill. Почему вставка дополнительного класса не влияет на заливку?

В частности, является ли circle.ball over правильной спецификацией, чтобы сказать "применимо, только если два класса ball и over одновременно присутствуют для круга"?

(случай симметричного c выхода мыши вместе с настройкой .classed('over', false) опущен.)

Answer 1

У вас просто проблема, когда атрибут класса stting устанавливает его как строку, а не как объект .attr('class', "ball") вместо .attr('class', ball) также в css вы ошибаетесь, в css он записан как псевдо-атрибут как :hover

см. Ниже рабочий фрагмент

let svg = d3.select('body')
            .append('svg');
svg.append('circle')
   .attr('cx', 100)
   .attr('cy', 100)
   .attr('r', 50)
   .attr('class', "ball")
   .on('mouseenter', function() {
       d3.select(this)
         .classed('over', true);
   });

circle.ball {
    fill: blue;
}
circle.ball:hover {
    fill: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

Проблема в вашем коде: сначала вы забыли добавить кавычки в .attr('class', ball), а во-вторых, неправильно установлен селектор при наведении курсора circle.ball over, он должен быть circle.ball.over, так как класс over включен круг не на одном из его детей, вот рабочий фрагмент:

let svg = d3.select('body')
            .append('svg');
svg.append('circle')
   .attr('cx', 100)
   .attr('cy', 100)
   .attr('r', 50)
   .attr('class', 'ball')
   .on('mouseenter', function(d) {
       console.log('asdasd');
       d3.select(this)
         .classed('over', true);
   });

circle.ball {
    fill: blue;
}
circle.ball.over {
    fill: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>