JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" id="xc" version="1.1">
    <text x="37.5" y="37.5" class="ablate-x">X</text>
</svg>

CSS

.ablate-x {
    font-size: 24px;
    color: gray;
    opacity: 0.5;
    font-weight: 900;
    cursor: hand;
    cursor: pointer;
}
.mute {
    opacity: 1;
    fill: red;
    stroke: red;
    stroke-width: 2px;
    /* we tried border: 2px solid red;   but it didn't work */
}

JavaScript

$("#xc").on("click", function (d) {
    var selection = d3.select(this);
    selection.classed("mute", (selection.classed("mute") ? false : true));
})