JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div class="container">
    <div>
      <svg id="viz" width="500" height="500">
        <text id="text1" x="10" y="20" active="0" >Text 1</text>
        <text id="text2" x="10" y="50" active="0" >Text 2</text>
        <text id="text3" x="10" y="80" active="0" >Text 3</text>
      </svg>
    </div>
  </div>
</body>

JavaScript

d3.select("#viz").selectAll("text").on("click", function() {

    selectedCandidate = d3.select(this).attr("id").split(",")[0];
    selectedColor = d3.select(this).attr("id").split(",")[1];

    // determine if the line with same id as the text is visible
    var active = d3.select("#"+selectedCandidate).attr('active') === "0" ? true : false;
    
    newOpacity = active ? 0 : 1;
    newActive = active ? 1 : 0;

    // hide or show the elements
    d3.select("#"+selectedCandidate)
      .attr("active", newActive)
      .transition()
      .duration(500)
      .style("opacity", newOpacity);
  })