mahuntington
/
d3-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

examples/adjustments for scatter plot

Browse Source
master
Matt Huntington 7 years ago
parent f05dbd4f8a
commit 99bd6035d1
4 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File

28
BUILD.md
Unescape View File

@ -1236,11 +1236,11 @@ Now clicking on the middle circle should work correctly.
## Hide elements beyond axis ## 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) ![](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 ```html
<svg id="container"> <svg id="container">
@ -1250,15 +1250,16 @@ To remove elements once they get beyond an axis, we can just add an outer SVG:
</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 ```javascript
d3.select('#container') d3.select('#container')
.style('width', WIDTH) .style('width', WIDTH)
.style('height', HEIGHT); .style('height', HEIGHT);
// //
// ... // lots of code omitted here, including render() declaration...
// //
var bottomAxis = d3.axisBottom(xScale);
d3.select('#container') d3.select('#container')
.append('g') .append('g')
.attr('id', 'x-axis') .attr('id', 'x-axis')
@ -1271,29 +1272,32 @@ d3.select('#container')
.attr('id', 'y-axis') .attr('id', 'y-axis')
.call(leftAxis); .call(leftAxis);
// //
// ... // code for create table omitted here...
// //
d3.select('#container').on('click', function(){ 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); d3.select('#container').call(zoom);
``` ```
And lastly, adjust css: And lastly, adjust css to replace `svg {` with `#container {`:
```css ```css
/* replace the rule for svg */
#container { #container {
overflow: visible; overflow: visible;
margin-bottom: 50px; 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) ![](https://i.imgur.com/t6BKuiz.png)

2
examples/scatter_plot/app.css
Unescape View File

@ -3,7 +3,7 @@ circle {
fill: black; fill: black;
transition: r 0.5s linear, fill 0.5s linear; transition: r 0.5s linear, fill 0.5s linear;
} }
svg { #container {
overflow: visible; overflow: visible;
margin-bottom: 50px; margin-bottom: 50px;
} }

10
examples/scatter_plot/app.js
Unescape View File

@ -20,7 +20,7 @@ var runs = [
]; ];
d3.select('svg') d3.select('#container')
.style('width', WIDTH) .style('width', WIDTH)
.style('height', HEIGHT); .style('height', HEIGHT);
@ -93,14 +93,14 @@ var render = function(){
render(); render();
var bottomAxis = d3.axisBottom(xScale); var bottomAxis = d3.axisBottom(xScale);
d3.select('svg') d3.select('#container')
.append('g') .append('g')
.attr('id', 'x-axis') //add an id .attr('id', 'x-axis') //add an id
.call(bottomAxis) .call(bottomAxis)
.attr('transform', 'translate(0,'+HEIGHT+')'); .attr('transform', 'translate(0,'+HEIGHT+')');
var leftAxis = d3.axisLeft(yScale); var leftAxis = d3.axisLeft(yScale);
d3.select('svg') d3.select('#container')
.append('g') .append('g')
.attr('id', 'y-axis') //add an id .attr('id', 'y-axis') //add an id
.call(leftAxis); .call(leftAxis);
@ -117,7 +117,7 @@ var createTable = function(){
createTable(); createTable();
d3.select('svg').on('click', function(){ d3.select('#container').on('click', function(){
var x = lastTransform.invertX(d3.event.offsetX); var x = lastTransform.invertX(d3.event.offsetX);
var y = lastTransform.invertY(d3.event.offsetY); var y = lastTransform.invertY(d3.event.offsetY);
@ -146,4 +146,4 @@ var zoomCallback = function(){
var zoom = d3.zoom() var zoom = d3.zoom()
.on('zoom', zoomCallback); .on('zoom', zoomCallback);
d3.select('svg').call(zoom); d3.select('#container').call(zoom);

6
examples/scatter_plot/index.html
Unescape View File

@ -6,8 +6,10 @@
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
</head> </head>
<body> <body>
<svg> <svg id="container">
<g id="points"></g> <svg>
<g id="points"></g>
</svg>
</svg> </svg>
<table> <table>
<thead> <thead>

Write Preview
Loading…
Cancel
Save