[英]Specify view for zoomable heatmap in D3
I am doing a heatmap with zoom and pan functionalities, and realized that the data points is showing up on the left side of the y-axis when zooming and panning, after I increased the space to the left of the heatmap, in order to make space for the y-axis (See picture). 我正在做一个具有缩放和平移功能的热图,并意识到在我增加热图左边的空间后,数据点在缩放和平移时显示在y轴的左侧,以便制作y轴的空间(见图)。 How can I avoid this?
我怎么能避免这个? A code sample is provided in below.
代码示例如下所示。
var zoom = d3.behavior.zoom()
.scaleExtent([dotWidth, dotHeight])
.x(xScale)
.on("zoom", zoomHandler);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function zoomHandler() {
var t = zoom.translate(),
tx = t[0],
ty = t[1];
tx = Math.min(tx, 0); // tx < 0
tx = Math.max(tx, -1000); //
zoom.translate([tx, ty]);
svg.select(".x.axis").call(xAxis);
svg.selectAll("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", function(d) { return (dotWidth * d3.event.scale); });
}
svg.selectAll("ellipse")
.data(dataset)
.enter()
.append("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", dotWidth)
.attr("ry", dotHeight)
.attr("fill", function(d) { return "rgba(100, 200, 200, " + colorScale(d.tOutC) + ")"; });
Zoom and pan image using manual scaling for CanvasRenderingContext2D.drawImage with d3. 使用d3对CanvasRenderingContext2D.drawImage手动缩放缩放和平移图像。 Preserves aspect ratio of the image
保留图像的宽高比
http://bl.ocks.org/robnagler/e245b69c473da73dfb85 http://bl.ocks.org/robnagler/e245b69c473da73dfb85
or this one 或者这个
http://www.d3noob.org/2014/02/generate-heatmap-with-leafletheat-and.html http://www.d3noob.org/2014/02/generate-heatmap-with-leafletheat-and.html
I figured out that the solution was to create a clipping path. 我发现解决方案是创建一个剪切路径。 I used the clipping method from this example: http://bl.ocks.org/mbostock/4248145 .
我使用了此示例中的剪切方法: http : //bl.ocks.org/mbostock/4248145 。 Basically I added the following code:
基本上我添加了以下代码:
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "mesh")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll(".hexagon")
.data(hexbin(points))
.enter().append("path")
.attr("class", "hexagon")
.attr("d", hexbin.hexagon())
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { return color(d.length); });
The code works fine with zooming features as well. 该代码也适用于缩放功能。 Just call the zoom function when creating the your svg canvas.
只需在创建svg画布时调用缩放功能即可。 Like this:
像这样:
// SVG canvas
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.