d3：如何在 if 条件下为圆圈添加边框？

Question

我在我的 d3 图中添加了几个圆圈，如下所示：

 this.node = this.svg.append('g')
    .attr('class', 'nodes')
  .selectAll('circle')
  .data(graph.nodes)
  .enter().append('circle')
    .attr('r', 5)
    .attr('fill', (d) => { return this.color(d.group); })
    .on('click', this.mouseclick)
    .call(d3.drag()
        .on('start', this.dragstarted)
        .on('drag', this.dragged)
        .on('end', this.dragended));

就像d.group上面使用的那样，我d.error在我的数据中存在一个是true或false. 如果在附加（或稍后？）时d.error === true如何为同一节点显示红色边框？

Answer 1

您可以对此使用条件d.error并应用 a transparent strokeif it is false，red否则：

.style("stroke", d => d.error ? "red" : "transparent")

使用undefined而不是transparent也可以解决问题：

.style("stroke", d => d.error ? "red" : undefined)
// which can also be written:
.style("stroke", d => { if (d.error) return  "red" })

这是一个演示：

.style("stroke", d => d.error ? "red" : "transparent")

.style("stroke", d => d.error ? "red" : undefined)
// which can also be written:
.style("stroke", d => { if (d.error) return  "red" })