我正在开发一个应该使用给定数据创建散点图的网络工具。由于我对任何可视化都不熟悉(也不是 JavaScript 专家),我决定使用 D3。
按照教程,观察示例和尝试的东西,我得到了一个带有画笔选择的散点图(还没有做任何事情)。
现在,由于目标是绘制基因,它们中的很多在 x 和 y 坐标方面将非常接近。所以我想实现一些 like this ,但在 x 和 y 方向。基本上放大拉丝部分。
到目前为止,我无法创建这种行为,此时我的轴确实发生了变化,但不再显示值并且没有任何缩放发生。您可以在 my toy subdomain 上实时看到它。我不知道哪里出了问题,所以任何帮助表示赞赏。
玩具域上使用的javascript:
// General variables
var svg, width, height;
var padding = 30;
var dataset = [
[ 5, 20 ],
[ 480, 90 ],
[ 250, 50 ],
[ 100, 33 ],
[ 330, 95 ],
[ 410, 12 ],
[ 475, 44 ],
[ 25, 67 ],
[ 85, 21 ],
[ 220, 88 ]
];
function drawGraph(){
scatterplot_area_size = $("#scatterplot").width();
width = scatterplot_area_size;
height = scatterplot_area_size * 0.75;
console.log(width);
// Retrieve the interval of the x and y data
var maxX = d3.max(dataset, function(d) {
return d[0]; //References first value in each sub-array
});
var minX = d3.min(dataset, function(d) {
return d[0]; //References first value in each sub-array
});
var maxY = d3.max(dataset, function(d) {
return d[1]; //References second value in each sub-array
});
var minY = d3.min(dataset, function(d) {
return d[1]; //References second value in each sub-array
});
// Create a (square) scatterplot area in the div with id scatterplot
// which spans the entire div in width
svg = d3.select("#scatterplot")
.append("svg")
.attr("width", width)
.attr("height", height);
// plot all points
var points = svg.append("g")
.attr("class", "point")
.selectAll("point")
.data(dataset)
.enter()
.append("circle");
console.log(minX + " " + minY);
// Create x and y scales
var x = d3.scale.linear()
.domain([minX, maxX])
.range([padding, (width-padding)]);
var y = d3.scale.linear()
.domain([minY, maxY])
.range([(height-padding), padding]); // Reverse the scale to let high values show at the top and low values at the bottom
// Set the x and y positions as well as the radius (hard coded 5)
points.attr("cx", function(d) {
return x(d[0]);
})
.attr("cy", function(d) {
return y(d[1]);
})
.attr("r", 5);
// Create the x and y axes
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(10)
.orient("left");
// Add the axes to the scatterplot
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height-padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
// Allow for brushing (selection of points)
var brush = d3.svg.brush()
.x(x)
.y(y)
.on("brush", brushmove)
.on("brushend", brushend);
svg.append("g")
.attr("class", "brush")
.call(brush)
.selectAll('rect')
.attr('height', height);
function brushmove() {
var extent = brush.extent();
points.classed("selected", function(d) {
return extent[0][0] <= d[0] && d[0] <= extent[1][0]
&& extent[0][1] <= d[1] && d[1] <= extent[1][1];
});
}
function brushend() {
x.domain(brush.extent());
y.domain(brush.extent());
transition_data();
reset_axis();
points.classed("selected", false);
d3.select(".brush").call(brush.clear());
}
function transition_data() {
console.log("transistion data called");
d3.selectAll("point")
.transition()
.duration(500)
.attr("cx", function(d) { console.log(d[0]); return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); });
}
function reset_axis() {
svg.transition().duration(500)
.select(".x.axis")
.call(xAxis);
svg.transition().duration(500)
.select(".y.axis")
.call(yAxis);
}
}
// Wait until the document is loaded, then draw the graph.
$( document ).ready(function() {
drawGraph();
});
// If the window is resized, redraw graph to make it fit again.
$( window ).resize(function() {
if(typeof svg != 'undefined'){
$("#scatterplot").empty();
}
drawGraph();
});
最佳答案
您的代码中有两个错误:
brushend()
中,您在两种情况下都使用 brush.extent()
的返回值来设置比例的域。但是请注意,画笔返回的范围是一个二维数组,如 [[xMin,yMin],[xMax,yMax]]
。您必须使用设置您的域var extent = brush.extent();
x.domain([extent[0][0],extent[1][0]]); // x.domain([xMin,xMax])
y.domain([extent[0][1],extent[1][1]]); // y.domain([yMin,yMax])
这些调整将使您的轴正确缩放,而点仍然固定。
d3.selectAll("point")
插入和操作数据点,svg:point
将它们称为 d3.selectAll("point")
类型。但是,没有这种类型的 svg 元素。尽管您对 var points
的调用仍然有效,但它始终会产生一个空选择,因为没有要选择的元素。出于这个原因,您在设置 svg 时第一次调用该函数确实有效,因为它会将所有数据绑定(bind)到输入选择并给出所需的结果。为了正确起见,您应该将其更正为// plot all points
var points = svg.append("g")
.attr("class", "point")
// .selectAll("point")
.selectAll("circle") // <-- This will work
.data(dataset)
.enter()
.append("circle");
在设置比例域后尝试更新您的点时,错误代码将不起作用,因为在这种情况下,空选择是没有意义的,并且不会对任何元素产生影响。由于在上面引用的语句中,您已经在 ojit_code 中存储了对您选择的引用,因此无需再次选择它们。您可以按如下方式重写您的更新:
function transition_data() {
// d3.selectAll("point") // Instead of this...
points // <-- ...use the reference to your selection
.transition()
.duration(500)
.attr("cx", function(d) { return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); });
}
我整理了一个有效的 JSFiddle 来演示解决方案。
关于javascript - D3 放大画笔范围,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30005145/