FormShapeParamsToJSON

shape parameters displayed in a form when clicked.

HTML

<!-- Click on a shape to see its label, x, y pos.
  Submit button clears the div (not working here in fiddle)
  but should be changed to instead call a fnt that updates the data with values changed in the form.
-->

<div id="rectInfo" style="opacity:0">
<!-- Rect info will appear here -->
</div>

CSS

#rectInfo {
    background-color: white;
    position: relative;
    padding: 10px;
    width: 230px;
    height:100px;
    border: 2px;
    outline: grey solid thin;
  }
.formLabel{
  font-family: courier;
}

JavaScript

var rectInfoActive = false;
var rectData = [
  { "label":"one",   "x": 100, "y": 50,  "height": 100, "width":120, "color" : "green" },
  { "label":"two",   "x": 250, "y": 50,  "height": 100, "width": 120, "color" : "purple"},
  { "label":"three", "x": 400, "y": 50,  "height": 100, "width": 120, "color" : "red"}
];

var svg = d3.select("body").append("svg")
  .attr("width", 600)
  .attr("height", 200);

var rects = svg.selectAll("rect")
  .data(rectData)
  .enter();
function submitForm(){
  rectData.push(  { "label":"three", "x": 300, "y": 30,  "height": 100, "width": 120, "color" : "red"})
  var rects = svg.selectAll("rect")
  .data(rectData)
  .enter();

  rects.append("rect")
  .attr("x",     function (d)  { return d.x; })
  .attr("y",     function (d)  { return d.y; })
  .attr("height", function (d) { return d.height; })
  .attr("width",  function (d) { return d.width; })
  .style("fill",  function(d)  { return d.color; })
  d3.selectAll("input").remove();
  d3.selectAll(".formEle").remove();
  d3.select("#rectInfo").style("opacity", 0);
}
rects.append("rect")
  .attr("x",     function (d)  { return d.x; })
  .attr("y",     function (d)  { return d.y; })
  .attr("height", function (d) { return d.height; })
  .attr("width",  function (d) { return d.width; })
  .style("fill",  function(d)  { return d.color; })
  .on('mouseover', function(d){
    var rectSelection = d3.select(this)
    .style({opacity:'0.5'})})
  .on('mouseout', function(d){
    var rectSelection = d3.select(this)
    .style({opacity:'1'})})
  .on("click", function(d){

   if (rectInfoActive == true){
     // clicked a node while previous info block displayed
     d3.selectAll("input").remove();
     d3.selectAll(".formEle").remove();
     d3.select("#rectInfo").style("opacity", 0);
   }

    console.log("You clicked rectangle: " + d.label)
    console.log ("X position: " + d.x)
    console.log ("Y position: " + d.y)

    d3.select("#rectInfo").style("opacity", 1);

    // Form displayed in /div...