mahuntington
/
noaa-scatterplot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clip circles outside of axes

Browse Source
main
Matt Huntington 3 years ago
parent ddb0138cba
commit 3215d9f98f
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File

2
app.css
Unescape View File

@ -4,7 +4,7 @@ circle {
transition: r 0.5s linear, fill 0.5s linear; /* add this transition to original code */ transition: r 0.5s linear, fill 0.5s linear; /* add this transition to original code */
} }
svg { #container {
overflow:visible; overflow:visible;
margin-bottom: 50px; margin-bottom: 50px;
} }

10
app.js
Unescape View File

@ -18,7 +18,7 @@ let runs = [
} }
]; ];
d3.select('svg') d3.select('#container')
.style('width', WIDTH) .style('width', WIDTH)
.style('height', HEIGHT); .style('height', HEIGHT);
@ -98,14 +98,14 @@ const render = () => {
render(); render();
const bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter const bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
d3.select('svg') d3.select('#container')
.append('g') //put everything inside a group .append('g') //put everything inside a group
.attr('id', 'x-axis') //add an id .attr('id', 'x-axis') //add an id
.call(bottomAxis) //generate the axis within the group .call(bottomAxis) //generate the axis within the group
.attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom .attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom
const leftAxis = d3.axisLeft(yScale); const 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); //no need to transform, since it's placed correctly initially .call(leftAxis); //no need to transform, since it's placed correctly initially
@ -122,7 +122,7 @@ const createTable = () => {
createTable(); createTable();
d3.select('svg').on('click', (event) => { d3.select('#container').on('click', (event) => {
let x = event.offsetX; let x = event.offsetX;
let y = event.offsetY; let y = event.offsetY;
if(lastTransform !== null){ if(lastTransform !== null){
@ -154,4 +154,4 @@ const zoomCallback = (event) => {
} }
const zoom = d3.zoom() const zoom = d3.zoom()
.on('zoom', zoomCallback); .on('zoom', zoomCallback);
d3.select('svg').call(zoom); d3.select('#container').call(zoom);

6
index.html
Unescape View File

@ -4,8 +4,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