[英]Specify view for zoomable heatmap in D3
我正在做一個具有縮放和平移功能的熱圖,並意識到在我增加熱圖左邊的空間后,數據點在縮放和平移時顯示在y軸的左側,以便制作y軸的空間(見圖)。 我怎么能避免這個? 代碼示例如下所示。
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) + ")"; });
使用d3對CanvasRenderingContext2D.drawImage手動縮放縮放和平移圖像。 保留圖像的寬高比
http://bl.ocks.org/robnagler/e245b69c473da73dfb85
或者這個
http://www.d3noob.org/2014/02/generate-heatmap-with-leafletheat-and.html
我發現解決方案是創建一個剪切路徑。 我使用了此示例中的剪切方法: http : //bl.ocks.org/mbostock/4248145 。 基本上我添加了以下代碼:
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); });
該代碼也適用於縮放功能。 只需在創建svg畫布時調用縮放功能即可。 像這樣:
// 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.