JSFiddle - React, Tailwind, and code Playground

HTML

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

<body>
  <a href="#" >stuff</a>
</body>

CSS

rect {
  fill: black;
}

.entityLink text {
  fill: blue;
  cursor: pointer;
}

JavaScript

var table = [
          { id: 1, name: 'Entity 1', value: 10 },
          { id: 2, name: 'Entity 2', value: 20 },
          { id: 3, name: 'Entity 3', value: 30 },
        ];

    var height = 100;
    var width = 300;
    var leftMargin =  100;
    var rightMargin = 10;
    var topMargin = 10;
    var bottomMargin = 50;

    var x = d3.scale.linear()
        .domain([0, 30])
        .range([0, width]);

    var y = d3.scale.ordinal()
        .domain(table.map(function(d, i) {
            return d.name; }))
        .rangeRoundBands([0, height]);

    var chart = d3
        .select('body')
        .append('svg')
        .attr('height', height + topMargin + bottomMargin)
        .attr('width', width + leftMargin + rightMargin);

    var bars = chart
        .selectAll('rect')
        .data(table)
        .enter()
        .append('rect')
            .attr('x', x(0) + leftMargin)
            .attr('y', function(d, i) {
                return y(d.name) + topMargin; })
            .attr('height', y.rangeBand())
            .attr('width', function(d, i) {
                return x(d.value); });

    var xAxis = d3.svg
        .axis()
        .scale(x)
        .orient('bottom');

    chart
        .append('g')
        .attr("transform", "translate(" + leftMargin + "," + (height + 15) + ")")
        .call(xAxis);

    var yAxis = d3.svg
        .axis()
        .scale(y)
        .orient('left')

        ;
		
    chart
        .append('g')
        .attr("transform", "translate(" + (leftMargin - 5) + "," + topMargin + ")")
        .attr("class", "entityLink")
        .call(yAxis);
        
d3.selectAll(".entityLink text")
  .on("click", function() { alert("hooray"); });