我开始学习 d3.js，我有一个问题:我有一个 JSON 数据，并为它们创建了两个不同的 View :散点图和表格。如果我在图表上标记为“选定”几个点，如何在表格中标记类似的数据？
最佳答案
这是一个以非常 d3 方式执行此操作的快速演示:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
circle {
fill-opacity: .7;
}
circle.hidden {
fill: #ccc !important;
}
.extent {
fill: #000;
fill-opacity: .125;
stroke: #fff;
}
.selected {
background: #427BD6;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data = [{"sepalLength":"5.1","sepalWidth":"3.5","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.7","sepalWidth":"3.2","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.6","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.9","petalLength":"1.7","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.4","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"2.9","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.4","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.1","species":"setosa"},{"sepalLength":"4.3","sepalWidth":"3.0","petalLength":"1.1","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.8","sepalWidth":"4.0","petalLength":"1.2","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.7","sepalWidth":"4.4","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.9","petalLength":"1.3","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.5","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.7","sepalWidth":"3.8","petalLength":"1.7","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.5","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.4","petalLength":"1.7","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.6","petalLength":"1.0","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.3","petalLength":"1.7","petalWidth":"0.5","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.4","petalLength":"1.9","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.0","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.4","petalLength":"1.6","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"3.5","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"3.4","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.7","sepalWidth":"3.2","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.1","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"4.1","petalLength":"1.5","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.5","sepalWidth":"4.2","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.2","petalLength":"1.2","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.5","sepalWidth":"3.5","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.6","petalLength":"1.4","petalWidth":"0.1","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"3.0","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.5","petalLength":"1.3","petalWidth":"0.3","species":"setosa"},{"sepalLength":"4.5","sepalWidth":"2.3","petalLength":"1.3","petalWidth":"0.3","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"3.2","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.5","petalLength":"1.6","petalWidth":"0.6","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.9","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.2","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.3","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.3","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"7.0","sepalWidth":"3.2","petalLength":"4.7","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.4","sepalWidth":"3.2","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"4.9","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.3","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.5","sepalWidth":"2.8","petalLength":"4.6","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.8","petalLength":"4.5","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"3.3","petalLength":"4.7","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"4.9","sepalWidth":"2.4","petalLength":"3.3","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.6","sepalWidth":"2.9","petalLength":"4.6","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.2","sepalWidth":"2.7","petalLength":"3.9","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.0","sepalWidth":"2.0","petalLength":"3.5","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.9","sepalWidth":"3.0","petalLength":"4.2","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.2","petalLength":"4.0","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.9","petalLength":"4.7","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.9","petalLength":"3.6","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"4.4","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"3.0","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"4.1","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.2","sepalWidth":"2.2","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.5","petalLength":"3.9","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.9","sepalWidth":"3.2","petalLength":"4.8","petalWidth":"1.8","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.8","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"2.5","petalLength":"4.9","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.8","petalLength":"4.7","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.4","sepalWidth":"2.9","petalLength":"4.3","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.6","sepalWidth":"3.0","petalLength":"4.4","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.8","sepalWidth":"2.8","petalLength":"4.8","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.0","petalLength":"5.0","petalWidth":"1.7","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.9","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.6","petalLength":"3.5","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.4","petalLength":"3.8","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.4","petalLength":"3.7","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"3.9","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"5.4","sepalWidth":"3.0","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"3.4","petalLength":"4.5","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"4.7","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"2.3","petalLength":"4.4","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"3.0","petalLength":"4.1","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.5","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.6","petalLength":"4.4","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"3.0","petalLength":"4.6","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.6","petalLength":"4.0","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"5.0","sepalWidth":"2.3","petalLength":"3.3","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.7","petalLength":"4.2","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"3.0","petalLength":"4.2","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.9","petalLength":"4.2","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.2","sepalWidth":"2.9","petalLength":"4.3","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.1","sepalWidth":"2.5","petalLength":"3.0","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.8","petalLength":"4.1","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"3.3","petalLength":"6.0","petalWidth":"2.5","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"7.1","sepalWidth":"3.0","petalLength":"5.9","petalWidth":"2.1","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.9","petalLength":"5.6","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.8","petalWidth":"2.2","species":"virginica"},{"sepalLength":"7.6","sepalWidth":"3.0","petalLength":"6.6","petalWidth":"2.1","species":"virginica"},{"sepalLength":"4.9","sepalWidth":"2.5","petalLength":"4.5","petalWidth":"1.7","species":"virginica"},{"sepalLength":"7.3","sepalWidth":"2.9","petalLength":"6.3","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"2.5","petalLength":"5.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.6","petalLength":"6.1","petalWidth":"2.5","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.2","petalLength":"5.1","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.7","petalLength":"5.3","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.8","sepalWidth":"3.0","petalLength":"5.5","petalWidth":"2.1","species":"virginica"},{"sepalLength":"5.7","sepalWidth":"2.5","petalLength":"5.0","petalWidth":"2.0","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.8","petalLength":"5.1","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"3.2","petalLength":"5.3","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.5","petalWidth":"1.8","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"3.8","petalLength":"6.7","petalWidth":"2.2","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"2.6","petalLength":"6.9","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.0","sepalWidth":"2.2","petalLength":"5.0","petalWidth":"1.5","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.2","petalLength":"5.7","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.6","sepalWidth":"2.8","petalLength":"4.9","petalWidth":"2.0","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"2.8","petalLength":"6.7","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.7","petalLength":"4.9","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.3","petalLength":"5.7","petalWidth":"2.1","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.2","petalLength":"6.0","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.2","sepalWidth":"2.8","petalLength":"4.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.1","sepalWidth":"3.0","petalLength":"4.9","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.8","petalLength":"5.6","petalWidth":"2.1","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.0","petalLength":"5.8","petalWidth":"1.6","species":"virginica"},{"sepalLength":"7.4","sepalWidth":"2.8","petalLength":"6.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"7.9","sepalWidth":"3.8","petalLength":"6.4","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.8","petalLength":"5.6","petalWidth":"2.2","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.8","petalLength":"5.1","petalWidth":"1.5","species":"virginica"},{"sepalLength":"6.1","sepalWidth":"2.6","petalLength":"5.6","petalWidth":"1.4","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"3.0","petalLength":"6.1","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"3.4","petalLength":"5.6","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"3.1","petalLength":"5.5","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.0","sepalWidth":"3.0","petalLength":"4.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"5.4","petalWidth":"2.1","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"5.6","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"5.1","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.8","sepalWidth":"3.2","petalLength":"5.9","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.3","petalLength":"5.7","petalWidth":"2.5","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.0","petalLength":"5.2","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.5","petalLength":"5.0","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.2","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.2","sepalWidth":"3.4","petalLength":"5.4","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.9","sepalWidth":"3.0","petalLength":"5.1","petalWidth":"1.8","species":"virginica"}];
data.forEach(function(d) {
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
});
x.domain(d3.extent(data, function(d) {
return d.sepalWidth;
})).nice();
y.domain(d3.extent(data, function(d) {
return d.sepalLength;
})).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Sepal Width (cm)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Sepal Length (cm)")
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {
return x(d.sepalWidth);
})
.attr("cy", function(d) {
return y(d.sepalLength);
})
.style("fill", function(d) {
return color(d.species);
});
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {
return d;
});
var brush = d3.svg.brush()
.x(x)
.y(y)
.on("brush", brushmove)
.on("brushend", brushend);
svg.call(brush);
// Highlight the selected circles.
function brushmove(p) {
var e = brush.extent();
svg.selectAll("circle").classed("hidden", function(d) {
if (e[0][0] > d.sepalWidth || d.sepalWidth > e[1][0] || e[0][1] > d.sepalLength || d.sepalLength > e[1][1]) {
d.selected = false;
} else {
d.selected = true;
}
return d.selected;
});
tRows.classed("selected", function(d) {
return d.selected;
});
}
// If the brush is empty, select all circles.
function brushend() {
if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
}
// draw table
var t = d3.select('body').append('table');
t.append('tr')
.selectAll('th')
.data(d3.keys(data[0]))
.enter()
.append('th')
.text(function(d) {
return d;
});
var tRows = t.selectAll('tr')
.data(data)
.enter()
.append('tr');
tRows
.selectAll('td')
.data(function(d) {
return d3.values(d);
})
.enter()
.append('td')
.html(function(d) {
return d;
});
</script>关于javascript - d3.js:与表格和图表的数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33342353/