使用 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 同时存在于一个圆圈时”？

（鼠标退出的对称情况以及设置.classed('over', false)被省略。）

Answer 1

您的代码中的问题，首先您忘记在.attr('class', ball) 中添加引号，第二个问题是您将悬停选择器circle.ball over 设置为错误的方式它应该是circle.ball.over，因为over 类已打开圈子不在它的一个孩子身上，这是一个有效的 sn-p：

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>

Answer 2

您在设置类属性时遇到问题，将其设置为字符串而不是对象 .attr('class', "ball") 而不是 .attr('class', ball) 同样在 css 中你误会了 over ，在 css 中它写成伪属性，如 :hover

看下面的工作 sn-p

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>