JSFiddle - React, Tailwind, and code Playground

by A B Jones

JavaScript

console.log('line test')

var dataPointsPath1 = [{
  x: 100,
  y: 100
}, {
  x: 600,
  y: 100
}, {
  x: 600,
  y: 300
}, {
  x: 100,
  y: 300
}, {
  x: 100,
  y: 100
}];

var dataPointsCircle1 = [{
  x: 150,
  y: 200,
  radius: 10
}, {
  x: 350,
  y: 200,
  radius: 15
}, {
  x: 550,
  y: 200,
  radius: 20
}]


var dataPointsPath2 = [{
  x: 60,
  y: 60
}, {
  x: 600,
  y: 60
}, {
  x: 600,
  y: 300
}, {
  x: 60,
  y: 300
}, {
  x: 60,
  y: 60
}];

var dataPointsCircle2 = [{
  x: 110,
  y: 200,
  radius: 10
}, {
  x: 310,
  y: 200,
  radius: 15
}, {
  x: 510,
  y: 200,
  radius: 20
}]

var thisContainer = d3.select('body').append('svg')
  .attr('width', 1600)
  .attr('height', 1600)

function createRects(data, colour, board) {
  var straight = d3.svg.line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })


  thisContainer
    .append("path")
    .attr("d", straight(data))
    .attr("mask", function(d, i) {
      return "url(#" + board + "_mask)";
    })
    .style("fill", colour)
    .style("opacity", 1)
    .style("stroke", "black")
    .style("stroke-width", "2")
    .on('click', function(d) {
      console.log(d);
    })
}

function createHoles(data, board) {

  var thisMask = thisContainer.append("svg:mask")
    .attr("id", board + '_mask')

  thisMask.append("rect")
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', "100%")
    .attr('height', "100%")
    .style('fill','white')

  thisMask.selectAll('.circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx', function(d) {
      console.log('clippath', d)
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
    .attr('r', function(d) {
      return d.radius
    })


  /*
    thisContainer.selectAll('.circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', function(d) {
        console.log(d)
        return d.x
      })
      .attr('cy', function(d) {
        return d.y
      })
      .attr('r',...