D3 Examples - D3 QRcode drawing

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
  font: 20px sans-serif;
}
​
.container {
    display: -webkit-flex;
    display: flex;
    width: 600px;
    height: 600px;
    flex-direction: column;
    justify-content: center;
}
.interface {
    margin: 0 50px 0 50px;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
</style>
<body>
  <div class="container">
    <div class="interface"><input type="text" value='test code' id="qrValue" /><button>Generate</button></div>
  </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="./qrcode2.js"></script>
<script>
​
document.addEventListener("DOMContentLoaded", (e) => {
   createCode(options.defaultContent);
});
​
let options = {
      id : 'qrcode_canvas',
      width : 400,
      height : 400,
      typeNumber : -1,
      correctLevel : QRErrorCorrectLevel.H,
      background : "#ffffff",
      foreground : "#000000",
      effect : 'none',
      defaultContent: 'Test Code'
    };
​
​
let margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = options.width - margin.left - margin.right,
    height = options.height - margin.top - margin.bottom,
    padding = 2,
    symbolSize = 80,
    moduleSize = 10;
​
let qrcodeGen;
​
let svg = d3.select(".container").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("shape-rendering", "geometric-precision");
​
let qrStage = svg.append('g').attr('class', 'qrcode-stage').attr('transform', 'translate('+margin.left+','+margin.top+')');
​
let input = d3.select('#qrValue').attr("value", options.defaultContent).on('input', function() {
  if(this.value){
    createCode(this.value.toString());
  }
});
​
let generateCodeBtn = d3.select('button').on('click', () => {
  input.node().value && createCode(input.node().value);
})
​
​
let clearStage = () => {
  qrStage && qrStage.selectAll("*").remove();
}
​
let createCode = (codeContent) => {
    qrcodeGen = new QRCode(options.typeNumber, options.correctLevel);
    qrcodeGen.addData(codeContent);
    qrcodeGen.make();
    draw();
}
​
let draw = () => {
  clearStage();
  let qrRows = qrStage.selectAll('rows')
    .data(qrcodeGen.modules)
    .enter()
    .append('g')
    .attr('id', (d,i) => 'row-'+i)
    .attr('transform', (d,i) => 'translate(0,'+moduleSize*i+')');
​
  let modules = qrRows.selectAll('modules')
    .data((d,i) => d)
    .enter()
    .append('path')
    .attr("d", d3.symbol().size(symbolSize).type(d3.symbolSquare))
    .attr("transform", (d,i) => 'translate('+moduleSize*i+',0)')
    .style("fill", (d) => d ? '#000':'#fff');
}
</script>
</body>
    