需要帮助链接 D3.js 中的两个散点图
[英]Need help linking two scatterplots in D3.js
问题描述
I am trying to link two scatterplots with d3.js.
我正在尝试将两个散点图与 d3.js 链接起来。 When the brush selects data from the first scatterplot, I am trying to increase the radius of the corresponding data in the second scatterplot.当画笔从第一个散点图中选择数据时，我试图增加第二个散点图中相应数据的半径。 I am pretty lost - graphs are each displaying different data attributes from same dataset.我很迷茫 - 每个图表都显示来自同一数据集的不同数据属性。 Currently using a brush to select data from each graph highlight in red and display in table when selected.当前使用刷子将每个图表中的 select 数据突出显示为红色，并在选中时显示在表格中。
Here is my code:这是我的代码：
.axis line {
fill: none;
stroke: black;
stroke-width: 1px;
shape-rendering: crispEdges
}
.axis text {
font-family: arial;
font-size: 10px;
}
table {
visibility: hidden;
position: absolute;
top: 30px;
left: 500px;
font-family: arial;
font-size: 0.7em;
}
.selected {
fill: red !important;
stroke: black !important;
opacity: 1.0;
}
.notSelected {
stroke: black !important;
fill: gray !important;
opacity: 1.0;
}
.start {
fill: black !important;
opacity: 1.0;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color: white;
top: 99;
color: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<div id="table">
<table>
<tr>
<th>SATM</th>
<th>SATV</th>
<th>ACT</th>
<th>GPA</th>
</tr>
</table>
</div>
<br/>
<hr/>
<br/>
<br/>
<script src="scores.js" charset="utf-8"></script>
<div id="D3Scatter1">
<h2>SATV vs SATM </h2>
<svg id="D3ScatterSVG" width="300" height="300">
<rect x="0" y="0" width="300" height="300" style="fill:white; stroke:black; stroke-width:1px"/>
</svg>
<script>
w = 300;
h = 300;
var scores = [
{ SATM: 430, SATV: 470, ACT: 15, GPA: 2.239 },
{ SATM: 560, SATV: 350, ACT: 16, GPA: 2.488 },
{ SATM: 400, SATV: 330, ACT: 17, GPA: 2.982 },
{ SATM: 410, SATV: 450, ACT: 17, GPA: 2.155 },
{ SATM: 430, SATV: 460, ACT: 17, GPA: 2.712 },
{ SATM: 430, SATV: 370, ACT: 18, GPA: 1.913 },
{ SATM: 440, SATV: 450, ACT: 18, GPA: 2.953 },
{ SATM: 550, SATV: 410, ACT: 18, GPA: 2.664 },
{ SATM: 570, SATV: 320, ACT: 18, GPA: 2.932 },
{ SATM: 370, SATV: 480, ACT: 19, GPA: 2.67 },
{ SATM: 440, SATV: 450, ACT: 19, GPA: 2.08 },
{ SATM: 510, SATV: 520, ACT: 19, GPA: 2.798 },
{ SATM: 540, SATV: 470, ACT: 19, GPA: 2.796 },
{ SATM: 490, SATV: 540, ACT: 20, GPA: 3.365 },
{ SATM: 490, SATV: 460, ACT: 20, GPA: 2.913 },
{ SATM: 490, SATV: 500, ACT: 20, GPA: 3.044 },
{ SATM: 510, SATV: 540, ACT: 20, GPA: 2.608 },
{ SATM: 530, SATV: 280, ACT: 20, GPA: 1.789 },
{ SATM: 510, SATV: 460, ACT: 21, GPA: 3.202 },
{ SATM: 520, SATV: 480, ACT: 21, GPA: 3.244 },
{ SATM: 540, SATV: 430, ACT: 21, GPA: 3.442 },
{ SATM: 560, SATV: 430, ACT: 21, GPA: 2.716 },
{ SATM: 620, SATV: 530, ACT: 21, GPA: 2.208 },
{ SATM: 690, SATV: 350, ACT: 21, GPA: 3.366 },
{ SATM: 410, SATV: 600, ACT: 22, GPA: 3.153 },
{ SATM: 470, SATV: 500, ACT: 22, GPA: 2.097 },
{ SATM: 560, SATV: 580, ACT: 22, GPA: 3.316 },
{ SATM: 580, SATV: 490, ACT: 22, GPA: 2.507 },
{ SATM: 590, SATV: 620, ACT: 22, GPA: 2.665 },
{ SATM: 600, SATV: 480, ACT: 22, GPA: 3.26 },
{ SATM: 650, SATV: 490, ACT: 22, GPA: 3.409 },
{ SATM: 450, SATV: 530, ACT: 23, GPA: 2.963 },
{ SATM: 470, SATV: 480, ACT: 23, GPA: 2.92 },
{ SATM: 480, SATV: 570, ACT: 23, GPA: 3.025 },
{ SATM: 490, SATV: 500, ACT: 23, GPA: 3.465 },
{ SATM: 510, SATV: 540, ACT: 23, GPA: 3.262 },
{ SATM: 520, SATV: 530, ACT: 23, GPA: 2.075 },
{ SATM: 520, SATV: 530, ACT: 23, GPA: 2.673 },
{ SATM: 550, SATV: 650, ACT: 23, GPA: 3.657 },
{ SATM: 550, SATV: 590, ACT: 23, GPA: 3.326 },
{ SATM: 560, SATV: 540, ACT: 23, GPA: 3.463 },
{ SATM: 560, SATV: 520, ACT: 23, GPA: 3.315 },
{ SATM: 570, SATV: 570, ACT: 23, GPA: 3.183 },
{ SATM: 580, SATV: 550, ACT: 23, GPA: 3.667 },
{ SATM: 610, SATV: 560, ACT: 23, GPA: 3.452 },
{ SATM: 610, SATV: 630, ACT: 23, GPA: 2.528 },
{ SATM: 410, SATV: 470, ACT: 24, GPA: 2.496 },
{ SATM: 500, SATV: 630, ACT: 24, GPA: 2.978 },
{ SATM: 520, SATV: 630, ACT: 24, GPA: 3.19 },
{ SATM: 520, SATV: 560, ACT: 24, GPA: 3.311 },
{ SATM: 520, SATV: 610, ACT: 24, GPA: 3.039 },
{ SATM: 540, SATV: 560, ACT: 24, GPA: 3.487 },
{ SATM: 540, SATV: 560, ACT: 24, GPA: 1.704 },
{ SATM: 550, SATV: 590, ACT: 24, GPA: 3.659 },
{ SATM: 580, SATV: 520, ACT: 24, GPA: 3.441 },
{ SATM: 590, SATV: 500, ACT: 24, GPA: 2.829 },
{ SATM: 620, SATV: 600, ACT: 24, GPA: 3.684 },
{ SATM: 630, SATV: 490, ACT: 24, GPA: 3.319 },
{ SATM: 640, SATV: 480, ACT: 24, GPA: 2.607 },
{ SATM: 420, SATV: 440, ACT: 25, GPA: 2.031 },
{ SATM: 480, SATV: 520, ACT: 25, GPA: 3.564 },
{ SATM: 490, SATV: 560, ACT: 25, GPA: 3.371 },
{ SATM: 490, SATV: 640, ACT: 25, GPA: 3.672 },
{ SATM: 510, SATV: 520, ACT: 25, GPA: 3.698 },
{ SATM: 580, SATV: 620, ACT: 25, GPA: 3.399 },
{ SATM: 600, SATV: 670, ACT: 25, GPA: 3.594 },
{ SATM: 620, SATV: 560, ACT: 25, GPA: 3.146 },
{ SATM: 710, SATV: 600, ACT: 25, GPA: 3.061 },
{ SATM: 720, SATV: 590, ACT: 25, GPA: 3.317 },
{ SATM: 730, SATV: 600, ACT: 25, GPA: 3.613 },
{ SATM: 780, SATV: 560, ACT: 25, GPA: 2.852 },
{ SATM: 480, SATV: 530, ACT: 26, GPA: 2.732 },
{ SATM: 490, SATV: 560, ACT: 26, GPA: 3.522 },
{ SATM: 520, SATV: 600, ACT: 26, GPA: 3.1 },
{ SATM: 520, SATV: 610, ACT: 26, GPA: 3.471 },
{ SATM: 520, SATV: 640, ACT: 26, GPA: 3.631 },
{ SATM: 530, SATV: 520, ACT: 26, GPA: 2.199 },
{ SATM: 530, SATV: 510, ACT: 26, GPA: 3.803 },
{ SATM: 550, SATV: 700, ACT: 26, GPA: 3.48 },
{ SATM: 560, SATV: 610, ACT: 26, GPA: 2.989 },
{ SATM: 580, SATV: 550, ACT: 26, GPA: 3.621 },
{ SATM: 580, SATV: 550, ACT: 26, GPA: 2.784 },
{ SATM: 580, SATV: 580, ACT: 26, GPA: 3.485 },
{ SATM: 580, SATV: 660, ACT: 26, GPA: 3.016 },
{ SATM: 580, SATV: 540, ACT: 26, GPA: 3.695 },
{ SATM: 590, SATV: 580, ACT: 26, GPA: 2.496 },
{ SATM: 590, SATV: 570, ACT: 26, GPA: 3.638 },
{ SATM: 620, SATV: 570, ACT: 26, GPA: 3.03 },
{ SATM: 620, SATV: 560, ACT: 26, GPA: 3.686 },
{ SATM: 630, SATV: 700, ACT: 26, GPA: 3.145 },
{ SATM: 630, SATV: 610, ACT: 26, GPA: 3.222 },
{ SATM: 660, SATV: 560, ACT: 26, GPA: 3.751 },
{ SATM: 660, SATV: 570, ACT: 26, GPA: 3.128 },
{ SATM: 690, SATV: 600, ACT: 26, GPA: 2.513 },
{ SATM: 470, SATV: 710, ACT: 27, GPA: 3.625 },
{ SATM: 530, SATV: 640, ACT: 27, GPA: 3.804 },
{ SATM: 540, SATV: 630, ACT: 27, GPA: 3.105 },
{ SATM: 540, SATV: 610, ACT: 27, GPA: 2.275 },
{ SATM: 550, SATV: 630, ACT: 27, GPA: 3.479 },
{ SATM: 560, SATV: 520, ACT: 27, GPA: 3.222 },
{ SATM: 570, SATV: 610, ACT: 27, GPA: 3.41 },
{ SATM: 580, SATV: 560, ACT: 27, GPA: 3.77 },
{ SATM: 600, SATV: 540, ACT: 27, GPA: 3.646 },
{ SATM: 610, SATV: 540, ACT: 27, GPA: 3.735 },
{ SATM: 610, SATV: 570, ACT: 27, GPA: 3.618 },
{ SATM: 610, SATV: 670, ACT: 27, GPA: 3.167 },
{ SATM: 610, SATV: 630, ACT: 27, GPA: 3.015 },
{ SATM: 620, SATV: 570, ACT: 27, GPA: 3.618 },
{ SATM: 620, SATV: 570, ACT: 27, GPA: 3.254 },
{ SATM: 620, SATV: 600, ACT: 27, GPA: 3.407 },
{ SATM: 630, SATV: 490, ACT: 27, GPA: 3.327 },
{ SATM: 650, SATV: 600, ACT: 27, GPA: 3.204 },
{ SATM: 650, SATV: 630, ACT: 27, GPA: 3.324 },
{ SATM: 650, SATV: 570, ACT: 27, GPA: 3.126 },
{ SATM: 670, SATV: 540, ACT: 27, GPA: 3.58 },
{ SATM: 670, SATV: 570, ACT: 27, GPA: 3.83 },
{ SATM: 670, SATV: 620, ACT: 27, GPA: 3.475 },
{ SATM: 670, SATV: 460, ACT: 27, GPA: 2.048 },
{ SATM: 670, SATV: 700, ACT: 27, GPA: 3.83 },
{ SATM: 690, SATV: 580, ACT: 27, GPA: 3.284 },
{ SATM: 720, SATV: 650, ACT: 27, GPA: 3.934 },
{ SATM: 720, SATV: 680, ACT: 27, GPA: 3.78 },
{ SATM: 520, SATV: 600, ACT: 28, GPA: 3.413 },
{ SATM: 530, SATV: 560, ACT: 28, GPA: 3.502 },
{ SATM: 550, SATV: 580, ACT: 28, GPA: 3.605 },
{ SATM: 550, SATV: 660, ACT: 28, GPA: 3.563 },
{ SATM: 570, SATV: 590, ACT: 28, GPA: 3.127 },
{ SATM: 580, SATV: 650, ACT: 28, GPA: 3.765 },
{ SATM: 590, SATV: 730, ACT: 28, GPA: 3.792 },
{ SATM: 590, SATV: 720, ACT: 28, GPA: 3.847 },
{ SATM: 600, SATV: 710, ACT: 28, GPA: 2.453 },
{ SATM: 600, SATV: 590, ACT: 28, GPA: 3.287 },
{ SATM: 600, SATV: 660, ACT: 28, GPA: 2.452 },
{ SATM: 600, SATV: 580, ACT: 28, GPA: 3.441 },
{ SATM: 600, SATV: 710, ACT: 28, GPA: 3.821 },
{ SATM: 610, SATV: 530, ACT: 28, GPA: 2.976 },
{ SATM: 610, SATV: 590, ACT: 28, GPA: 3.75 },
{ SATM: 610, SATV: 650, ACT: 28, GPA: 2.972 },
{ SATM: 610, SATV: 630, ACT: 28, GPA: 3.647 },
{ SATM: 630, SATV: 620, ACT: 28, GPA: 3.424 },
{ SATM: 630, SATV: 570, ACT: 28, GPA: 3.457 },
{ SATM: 660, SATV: 630, ACT: 28, GPA: 3.66 },
{ SATM: 710, SATV: 670, ACT: 28, GPA: 3.877 },
{ SATM: 730, SATV: 590, ACT: 28, GPA: 3.534 },
{ SATM: 540, SATV: 630, ACT: 29, GPA: 3.594 },
{ SATM: 570, SATV: 570, ACT: 29, GPA: 3.5 },
{ SATM: 580, SATV: 570, ACT: 29, GPA: 3.575 },
{ SATM: 580, SATV: 620, ACT: 29, GPA: 3.03 },
{ SATM: 600, SATV: 650, ACT: 29, GPA: 3.301 },
{ SATM: 610, SATV: 680, ACT: 29, GPA: 2.94 },
{ SATM: 610, SATV: 650, ACT: 29, GPA: 2.738 },
{ SATM: 610, SATV: 660, ACT: 29, GPA: 2.943 },
{ SATM: 610, SATV: 610, ACT: 29, GPA: 2.121 },
{ SATM: 620, SATV: 630, ACT: 29, GPA: 3.665 },
{ SATM: 640, SATV: 660, ACT: 29, GPA: 2.864 },
{ SATM: 640, SATV: 620, ACT: 29, GPA: 3.712 },
{ SATM: 640, SATV: 690, ACT: 29, GPA: 3.319 },
{ SATM: 640, SATV: 670, ACT: 29, GPA: 3.929 },
{ SATM: 640, SATV: 640, ACT: 29, GPA: 3.838 },
{ SATM: 650, SATV: 630, ACT: 29, GPA: 3.649 },
{ SATM: 650, SATV: 490, ACT: 29, GPA: 3.528 },
{ SATM: 650, SATV: 620, ACT: 29, GPA: 2.828 },
{ SATM: 660, SATV: 640, ACT: 29, GPA: 3.464 },
{ SATM: 680, SATV: 680, ACT: 29, GPA: 3.538 },
{ SATM: 680, SATV: 630, ACT: 29, GPA: 3.919 },
{ SATM: 690, SATV: 620, ACT: 29, GPA: 2.827 },
{ SATM: 700, SATV: 670, ACT: 29, GPA: 3.677 },
{ SATM: 700, SATV: 610, ACT: 29, GPA: 2.645 },
{ SATM: 710, SATV: 640, ACT: 29, GPA: 3.898 },
{ SATM: 710, SATV: 590, ACT: 29, GPA: 3.854 },
{ SATM: 770, SATV: 610, ACT: 29, GPA: 2.01 },
{ SATM: 550, SATV: 650, ACT: 30, GPA: 3.134 },
{ SATM: 560, SATV: 670, ACT: 30, GPA: 3.947 },
{ SATM: 570, SATV: 720, ACT: 30, GPA: 3.662 },
{ SATM: 570, SATV: 670, ACT: 30, GPA: 2.983 },
{ SATM: 590, SATV: 640, ACT: 30, GPA: 3.544 },
{ SATM: 620, SATV: 600, ACT: 30, GPA: 2.586 },
{ SATM: 640, SATV: 600, ACT: 30, GPA: 3.707 },
{ SATM: 640, SATV: 580, ACT: 30, GPA: 3.768 },
{ SATM: 660, SATV: 710, ACT: 30, GPA: 3.527 },
{ SATM: 660, SATV: 680, ACT: 30, GPA: 3.344 },
{ SATM: 670, SATV: 630, ACT: 30, GPA: 3.407 },
{ SATM: 680, SATV: 690, ACT: 30, GPA: 3.406 },
{ SATM: 680, SATV: 670, ACT: 30, GPA: 2.925 },
{ SATM: 690, SATV: 630, ACT: 30, GPA: 3.877 },
{ SATM: 700, SATV: 670, ACT: 30, GPA: 3.992 },
{ SATM: 700, SATV: 760, ACT: 30, GPA: 3.975 },
{ SATM: 720, SATV: 700, ACT: 30, GPA: 3.987 },
{ SATM: 730, SATV: 610, ACT: 30, GPA: 3.8 },
{ SATM: 730, SATV: 730, ACT: 30, GPA: 3.989 },
{ SATM: 750, SATV: 650, ACT: 30, GPA: 3.33 },
{ SATM: 750, SATV: 650, ACT: 30, GPA: 3.469 },
{ SATM: 590, SATV: 660, ACT: 31, GPA: 3.236 },
{ SATM: 600, SATV: 670, ACT: 31, GPA: 3.812 },
{ SATM: 610, SATV: 650, ACT: 31, GPA: 3.593 },
{ SATM: 640, SATV: 710, ACT: 31, GPA: 3.745 },
{ SATM: 640, SATV: 700, ACT: 31, GPA: 3.178 },
{ SATM: 640, SATV: 720, ACT: 31, GPA: 3.76 },
{ SATM: 660, SATV: 780, ACT: 31, GPA: 3.737 },
{ SATM: 660, SATV: 710, ACT: 31, GPA: 3.61 },
{ SATM: 660, SATV: 630, ACT: 31, GPA: 3.618 },
{ SATM: 660, SATV: 610, ACT: 31, GPA: 3.794 },
{ SATM: 660, SATV: 560, ACT: 31, GPA: 2.857 },
{ SATM: 680, SATV: 700, ACT: 31, GPA: 3.483 },
{ SATM: 690, SATV: 750, ACT: 31, GPA: 3.811 },
{ SATM: 690, SATV: 680, ACT: 31, GPA: 3.791 },
{ SATM: 690, SATV: 660, ACT: 31, GPA: 3.813 },
{ SATM: 690, SATV: 630, ACT: 31, GPA: 3.954 },
{ SATM: 700, SATV: 630, ACT: 31, GPA: 3.62 },
{ SATM: 700, SATV: 760, ACT: 31, GPA: 3.493 },
{ SATM: 700, SATV: 640, ACT: 31, GPA: 3.912 },
{ SATM: 700, SATV: 680, ACT: 31, GPA: 3.485 },
{ SATM: 710, SATV: 700, ACT: 31, GPA: 3.763 },
{ SATM: 720, SATV: 630, ACT: 31, GPA: 2.707 },
{ SATM: 730, SATV: 750, ACT: 31, GPA: 3.947 },
{ SATM: 760, SATV: 590, ACT: 31, GPA: 3.887 },
{ SATM: 770, SATV: 650, ACT: 31, GPA: 3.988 },
{ SATM: 620, SATV: 760, ACT: 32, GPA: 3.593 },
{ SATM: 630, SATV: 650, ACT: 32, GPA: 3.598 },
{ SATM: 650, SATV: 720, ACT: 32, GPA: 3.941 },
{ SATM: 660, SATV: 740, ACT: 32, GPA: 2.456 },
{ SATM: 660, SATV: 730, ACT: 32, GPA: 3.909 },
{ SATM: 660, SATV: 690, ACT: 32, GPA: 3.909 },
{ SATM: 670, SATV: 650, ACT: 32, GPA: 3.288 },
{ SATM: 670, SATV: 620, ACT: 32, GPA: 3.91 },
{ SATM: 690, SATV: 700, ACT: 32, GPA: 3.78 },
{ SATM: 690, SATV: 720, ACT: 32, GPA: 3.851 },
{ SATM: 690, SATV: 680, ACT: 32, GPA: 3.764 },
{ SATM: 690, SATV: 750, ACT: 32, GPA: 3.823 },
{ SATM: 690, SATV: 680, ACT: 32, GPA: 3.676 },
{ SATM: 700, SATV: 640, ACT: 32, GPA: 2.721 },
{ SATM: 700, SATV: 700, ACT: 32, GPA: 3.942 },
{ SATM: 710, SATV: 680, ACT: 32, GPA: 4 },
{ SATM: 710, SATV: 750, ACT: 32, GPA: 3.943 },
{ SATM: 710, SATV: 740, ACT: 32, GPA: 2.708 },
{ SATM: 730, SATV: 580, ACT: 32, GPA: 3.433 },
{ SATM: 760, SATV: 720, ACT: 32, GPA: 3.784 },
{ SATM: 770, SATV: 670, ACT: 32, GPA: 3.303 },
{ SATM: 780, SATV: 800, ACT: 32, GPA: 3.929 },
{ SATM: 800, SATV: 750, ACT: 32, GPA: 3.653 },
{ SATM: 620, SATV: 730, ACT: 33, GPA: 3.916 },
{ SATM: 650, SATV: 690, ACT: 33, GPA: 3.401 },
{ SATM: 680, SATV: 720, ACT: 33, GPA: 3.824 },
{ SATM: 690, SATV: 590, ACT: 33, GPA: 3.535 },
{ SATM: 700, SATV: 580, ACT: 33, GPA: 3.898 },
{ SATM: 710, SATV: 730, ACT: 33, GPA: 3.643 },
{ SATM: 710, SATV: 730, ACT: 33, GPA: 3.98 },
{ SATM: 710, SATV: 720, ACT: 33, GPA: 3.642 },
{ SATM: 710, SATV: 630, ACT: 33, GPA: 3.874 },
{ SATM: 730, SATV: 690, ACT: 33, GPA: 3.936 },
{ SATM: 790, SATV: 730, ACT: 33, GPA: 3.154 },
{ SATM: 800, SATV: 630, ACT: 33, GPA: 3.925 },
{ SATM: 800, SATV: 720, ACT: 33, GPA: 3.888 },
{ SATM: 640, SATV: 730, ACT: 34, GPA: 3.885 },
{ SATM: 640, SATV: 670, ACT: 34, GPA: 3.536 },
{ SATM: 670, SATV: 650, ACT: 34, GPA: 3.872 },
{ SATM: 690, SATV: 800, ACT: 34, GPA: 3.894 },
{ SATM: 700, SATV: 800, ACT: 34, GPA: 2.534 },
{ SATM: 720, SATV: 720, ACT: 34, GPA: 3.37 },
{ SATM: 740, SATV: 740, ACT: 34, GPA: 3.833 },
{ SATM: 750, SATV: 800, ACT: 34, GPA: 3.944 },
{ SATM: 760, SATV: 750, ACT: 34, GPA: 3.757 },
{ SATM: 770, SATV: 730, ACT: 34, GPA: 3.325 },
{ SATM: 790, SATV: 710, ACT: 34, GPA: 3.928 },
{ SATM: 790, SATV: 760, ACT: 34, GPA: 3.889 },
{ SATM: 790, SATV: 660, ACT: 34, GPA: 3.821 },
{ SATM: 800, SATV: 680, ACT: 34, GPA: 3.765 },
{ SATM: 700, SATV: 680, ACT: 35, GPA: 3.911 },
{ SATM: 720, SATV: 770, ACT: 35, GPA: 3.981 },
{ SATM: 750, SATV: 730, ACT: 35, GPA: 3.882 },
{ SATM: 790, SATV: 780, ACT: 35, GPA: 3.887 }
];
var id = [];
for (var i = 0; i <= scores.length; i++) {
id.push(i);
}
// id to each element in dataset
scores.forEach(function(element) {
element.id = id[scores.indexOf(element)];
});
var SAT = d3.format("2d"),
ACT = d3.format("1d"),
GPA = d3.format(".2f");
var svg = d3.select("#D3ScatterSVG")
svg.append("g")
var padding = 30;
var width = 250;
var height = 250;
var xScale = d3.scaleLinear()
.domain([0, 800])
.range([0, 250])
.nice();
var yScale = d3.scaleLinear()
.domain([800, 0])
.range([0, 250])
.nice();
svg.append("g")
var xAxis = d3.axisBottom();
xAxis.scale(xScale);
svg.append("g")
var yAxis = d3.axisLeft();
yAxis.scale(yScale);
var G1 = svg.append("g")
.selectAll("circle")
.data(scores)
.enter().append("circle")
.attr("cx", function(d) {return d.SATV/3 + 15 })
.attr("cy",function(d) {return 290 - d.SATM/3})
.attr("id", function(d) { return d.id})
.attr("r",function(d) {return 3})
.style("fill", "black")
.style("stroke","gray")
.style("stroke-width", .5)
svg.append("g")
.classed("axis", true)
.attr("transform","translate(" + padding + "," + (height+padding) + ")")
.call(xAxis);
svg.append("g")
.classed("axis", true)
.attr("transform","translate(" + padding + "," + padding + ")")
.call(yAxis);
function showSelection() {
area = d3.event.selection
if (area != null) {
var coordinates = d3.brushSelection(this);
G1.attr("class", "notSelected");
G1.filter(function (){
var x = d3.select(this).attr("cx"),
y = d3.select(this).attr("cy");
id1 = d3.select(this).attr("id");
return Brushed(coordinates, x, y);
})
.attr("class", "selected")
})
}
}
function resetG1() {
area = d3.event.selection
if (area != null) {
G1.attr("class", "start");
resetTable();
}
}
function showTable() {
area = d3.event.selection
if (!area) return;
var brushed = d3.selectAll(".selected").data();
if (brushed.length > 0) {
resetTable();
brushed.forEach(row => fillTable(row))
} else {
resetTable();
}
}
var brush = d3.brush()
.on("start", resetG1)
.on("brush", showSelection)
.on("end", showTable);
svg.append("g")
.call(brush);
function resetTable() {
hideTable();
d3.selectAll(".row_data").remove();
}
function Brushed(coordinates, x, y) {
var x0 = coordinates[0][0], x1 = coordinates[1][0], y0 = coordinates[0][1], y1 = coordinates[1][1];
return x0 <= x && x <= x1 && y0 <= y && y <= y1;
}
function hideTable() {
d3.select("table").style("visibility", "hidden");
}
function showColumns() {
d3.select("table").style("visibility", "visible");
}
function fillTable(row) {
showColumns();
var rows= [SAT(row.SATM),
SAT(row.SATV),
ACT(row.ACT),
GPA(row.GPA)];
d3.select("table")
.append("tr")
.attr("class", "row_data")
.selectAll("td")
.data(rows)
.enter()
.append("td")
.attr("align", (d, i) => i == 0 ? "left" : "right")
.text(d => d);
}
</script>
<div id="D3Scatter2">
<h2>GPA vs ACT</h2>
<svg id="D3ScatterSVG2" width="300" height="300">
<rect x="0" y="0" width="300" height="300" style="fill:white; stroke:black; stroke-width:1px"/>
</svg>
<script>
var GPAmin = 5.0
for(i=0;i<scores.length;++i){
if(scores[i].GPA < GPAmin){
GPAmin = scores[i].GPA;
}
}
var GPAmax = 0.0
for(i=0;i<scores.length;++i){
if(scores[i].GPA > GPAmax){
GPAmax = scores[i].GPA;
}
}
var ACTmin = 36
for(i=0;i<scores.length;++i){
if(scores[i].ACT < ACTmin){
ACTmin = scores[i].ACT;
}
}
var ACTmax = 0
for(i=0;i<scores.length;++i){
if(scores[i].ACT> ACTmax){
ACTmax = scores[i].ACT;
}
}
var svg1 = d3.select("#D3ScatterSVG2")
svg1.append("g")
var padding = 30;
var width = 250;
var height = 210;
var xScale = d3.scaleLinear()
.domain([GPAmin, GPAmax])
.range([0, 250])
.nice();
var yScale = d3.scaleLinear()
.domain([36,14])
.range([0, 210])
.nice();
var xAxis = d3.axisBottom();
xAxis.scale(xScale);
var yAxis = d3.axisLeft();
yAxis.scale(yScale);
var G2 = svg1.selectAll("circle")
.data(scores)
.enter().append("circle")
.attr("cx", function(d) { return d.GPA*100 - 127})
.attr("cy",function(d) {return 366 - d.ACT*9.2})
.attr("class", function(d,i) { return "pt" + i; })
.attr("r",function(d) { return 3})
.style("fill", "black")
.on("click", function(){
G2.style("fill","gray")
d3.select(this).style("fill","red")
})
.style("stroke","gray")
.style("stroke-width", .5)
svg1.append("g")
.classed("axis", true)
.attr("transform","translate(" + padding + "," + (height+padding) + ")")
.call(xAxis);
svg1.append("g")
.classed("axis", true)
.attr("transform","translate(" + padding + "," + padding + ")")
.call(yAxis);
function resetG2(){
area = d3.event.selection
if (area != null) {
G2.attr("class", "start");
resetTable();
}
}
function showSelection1() {
area =d3.event.selection
if (area!= null) {
G2.attr("class", "notSelected");
var coordinates = d3.brushSelection(this);
G2.filter(function (){
x = d3.select(this).attr("cx"),
y = d3.select(this).attr("cy");
return Brushed(coordinates, x, y);
})
.attr("class", "selected");
}
}
function showTable1() {
area = d3.event.selection
if (!area) return;
var brushed = d3.selectAll(".selected").data();
if (brushed.length > 0) {
resetTable();
brushed.forEach(row => fillTable(row))
} else {
resetTable();
}
}
var brush1 = d3.brush()
.on("start", resetG2)
.on("brush", showSelection1)
.on("end", showTable1);
svg1.append("g")
.call(brush1);
</script>
</div>
</body>
</html>
1 个解决方案
解决方案1
-1 2019-10-22 17:43:14
I would like to recommend crossfilter ( 1 ) for your data manipulation, that means real-time update of multiple charts and also you can follow up with examples.我想为您的数据操作推荐 crossfilter ( 1 )，这意味着实时更新多个图表，您也可以跟进示例。 Also you can think about DC.js another abstract implementation of d3 for similar kind of purposes that you mentioned above.您还可以考虑 DC.js 另一个 d3 的抽象实现，用于您上面提到的类似目的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
需要有关更新D3.js wordcloud的帮助 - Need help on updating a D3.js wordcloud
d3.js可以使用来自同一来源的数据在同一图表上绘制两个散点图吗？ - Can d3.js draw two scatterplots on the same graph using data from the same source?
d3.js - 需要帮助调试Chrome，Safari和Firefox中的差异 - d3.js - need help debugging differences in Chrome, Safari and Firefox
需要使用d3.js来创建堆积条形图的帮助 - Need help using d3.js to create Stacked Bar Chart
带有 jQuery 和 D3.js 的圆环图插件在事件中需要帮助 - Donut Chart Plugin with jQuery And D3.js need help in event
需要帮助修改d3.js可折叠力布局 - Need help modifying d3.js Collapsible Force Layout
D3.js中的节点和子节点链接 - node and subnodes linking in D3.js
D3.js，需要在d3.js中点击事件 - D3.js, Need click event in d3.js
需要帮助在D3.js条形图中用条形排列x轴刻度 - Need help lining up x axis ticks with bars in D3.js bar chart
在D3.js的帮助下集成Datatables插件 - Integrate Datatables plugin with the help of D3.js
相关标签