JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<button id="button">Do Something</button>

<div id="chart1"></div>

CSS

circle { color: blue;}

JavaScript

var data1 = [23];

function clusterChart() {
    var width = 500,
        height = 500,
        margin = 16,
        onTotalMouseOver = null,
        onTotalClick = null,
        onClusterMouseOver = null,
        onClusterClick = null;

    function chart(selection) {
        selection.each(function(data) {
        
        var svg = d3.select(this).selectAll('svg').data([data]);
        var circle = svg.selectAll('circle').data(function (d){return d});
            
        svg.enter().append('svg')
            .attr('height', height)
            .attr('width', width);
        
        circle  .enter().append('circle')
                //.data(function(d, i){return d})
                .attr('cx', width/2)
                .attr('cy', height/2)
                .attr('r', 10);
                
        circle  .style('fill', 'red')
                .transition().delay(1000).duration(600)
                .attr('r', function(d){return d});
        });
        

    }

    chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };

    chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };

    chart.onClusterClick = function(_) {
        if (!arguments.length) return onClusterClick;
        onClusterClick = _;
        return chart;
    };

    return chart;
}

d3.select('#chart1')
  .datum(data1)
  .call(clusterChart());

$('#button').on('click', function(event){
    d3  .select('#chart')
                .datum(data1)
                .call(clusterChart);
});