examples/adjustments for scatter plot

7 years ago · 99bd6035d1
parent f05dbd4f8a
commit 99bd6035d1
4 changed files with 26 additions and 20 deletions
--- a/BUILD.md
+++ b/BUILD.md
@ -1236,11 +1236,11 @@ Now clicking on the middle circle should work correctly.

 ## Hide elements beyond axis

-Check out our graph when you pan:
+If you pan or zoom extensively, you'll notice that the circles are visible beyond the bounds of the axes:

 ![](https://i.imgur.com/s2oXYxS.png)

-To remove elements once they get beyond an axis, we can just add an outer SVG:
+To hide elements once they get beyond an axis, we can just add an outer SVG with `id="container"` around our current `<svg>` element in `index.html`:

 ```html
 <svg id="container">
@ -1250,15 +1250,16 @@ To remove elements once they get beyond an axis, we can just add an outer SVG:
 </svg>
 ```

-Now replace all `d3.select('svg')` with `d3.select('#container')`
+Now replace all `d3.select('svg')` code with `d3.select('#container')`.  You can do a find replace.  There should be five instances to change:

 ```javascript
 d3.select('#container')
    .style('width', WIDTH)
    .style('height', HEIGHT);
 //
-// ...
+// lots of code omitted here, including render() declaration...
 //
+var bottomAxis = d3.axisBottom(xScale);
 d3.select('#container')
 	.append('g')
    .attr('id', 'x-axis')
@ -1271,29 +1272,32 @@ d3.select('#container')
    .attr('id', 'y-axis')
 	.call(leftAxis);
 //
-// ...
+// code for create table omitted here...
 //
 d3.select('#container').on('click', function(){
 //
-// ...
+// click handler functionality omitted
 //
 });
 //
-// ...
+// zoomCallback code omitted here
 //
+var zoom = d3.zoom()
+    .on('zoom', zoomCallback);
 d3.select('#container').call(zoom);    
 ```

-And lastly, adjust css:
+And lastly, adjust css to replace `svg {` with `#container {`:

 ```css
-/* replace the rule for svg */
 #container {
    overflow: visible;
    margin-bottom: 50px;
- }
+}
 ```

+Now circles should be hidden once they move beyond the bounds of the inner `<svg>` element:
+
 ![](https://i.imgur.com/t6BKuiz.png)


--- a/examples/scatter_plot/app.css
+++ b/examples/scatter_plot/app.css
@ -3,7 +3,7 @@ circle {
    fill: black;
    transition: r 0.5s linear, fill 0.5s linear;
 }
-svg {
+#container {
    overflow: visible;
    margin-bottom: 50px;
 }
--- a/examples/scatter_plot/app.js
+++ b/examples/scatter_plot/app.js
@ -20,7 +20,7 @@ var runs = [
 ];


-d3.select('svg')
+d3.select('#container')
    .style('width', WIDTH)
    .style('height', HEIGHT);

@ -93,14 +93,14 @@ var render = function(){
 render();

 var bottomAxis = d3.axisBottom(xScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
    .attr('id', 'x-axis') //add an id
 	.call(bottomAxis)
    .attr('transform', 'translate(0,'+HEIGHT+')');

 var leftAxis = d3.axisLeft(yScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
    .attr('id', 'y-axis') //add an id
 	.call(leftAxis);
@ -117,7 +117,7 @@ var createTable = function(){

 createTable();

-d3.select('svg').on('click', function(){
+d3.select('#container').on('click', function(){
    var x = lastTransform.invertX(d3.event.offsetX);
    var y = lastTransform.invertY(d3.event.offsetY);

@ -146,4 +146,4 @@ var zoomCallback = function(){

 var zoom = d3.zoom()
    .on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+d3.select('#container').call(zoom);
--- a/examples/scatter_plot/index.html
+++ b/examples/scatter_plot/index.html
@ -6,9 +6,11 @@
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
+        <svg id="container">
            <svg>
                <g id="points"></g>
            </svg>
+        </svg>
        <table>
            <thead>
                <tr>