data binding experiments

attempt to understand enter() exit() data()

by hrabinowitz

HTML

<div id="divForSvg">
    <svg>
        <rect width="100%" height="100%"/>
        <circle cx="0" cy="0" r="50%"/>
    </svg>
</div>

CSS

svg rect {
    fill: yellow;
}

svg circle {
    fill: blue;
}

JavaScript

var letters = [
  {name: "A", frequency: .08167},
  {name: "B", frequency: .01492},
  {name: "C", frequency: .02780},
  {name: "D", frequency: .04253},
  {name: "E", frequency: .12702}
];

var letters2 = [
  {name: "E", frequency: .1},
  {name: "B", frequency: .2},
  {name: "C", frequency: .3},
  {name: "D", frequency: .4},
  {name: "F", frequency: .5}
];

function name(d) {
    return d.name;
}

var divs = d3.selectAll("p").data(letters, name);
var divsEnter = divs.enter().append("p");
divsEnter.text(function(d) {return "data is " + d.name + ", freq=" + d.frequency});

console.log("divs=", divs);

var divsUpdate = d3.selectAll("p").data(letters2, name);
console.log("divsUpdate=", divsUpdate);

console.log("divs.enter()=", divsUpdate.enter()
            .append('p')
            .text(function(d) {return "new data is " + d.name + ", freq=" + d.frequency}));

console.log("divs.exit()=", divsUpdate.exit().remove());