d3js放大圖
[英]d3js zoom into plot
問題描述
我已經使用d3js進行了繪制，並且由於plot函數超出了繪制的范圍，因此我想對其進行裁剪。 同時，我還考慮了縮放。 因此，我開始在代碼中實現以下示例； http://bl.ocks.org/mbostock/3892919
但是不幸的是，我的實現似乎不正確。 我的x軸和y軸標簽似乎消失了+背景變成了黑色+實際的繪圖丟失了，直到您嘗試縮放：S為止。
提出了解決方法，即正確解決該問題的方法。 此外，我也願意改進我的代碼。
帶有縮放版本的Jsfiddle： http : //jsfiddle.net/n3Lndkum/12/上一個工作版本的Jsfiddle： http : //jsfiddle.net/n3Lndkum/9/
嵌入式版本：
var margin = {top: 20, right: 20, bottom: 50, left: 50}, width = 250 - margin.left - margin.right, height = 250 - margin.top - margin.bottom, padding = 50; var x = d3.scale.linear() .range([0, width]) .domain([0, 10]); var y = d3.scale.linear() .range([height, 0]) .domain([0, 10]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5) .innerTickSize(-6) .outerTickSize(0) .tickPadding(7); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .innerTickSize(-6) .outerTickSize(0) .tickPadding(7); var zoom = d3.behavior.zoom() .x(x) .y(y) .scaleExtent([0.1, 32]) .on("zoom", zoomed); var data = []; for (var k = -100; k < 101; k++) { data.push({x: k/10, y: 0.5*k*k/100}); } var line = d3.svg.line() .x(function(d) { return x(dx); }) .y(function(d) { return y(dy); }) .interpolate("linear"); 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 + ")") .call(zoom); svg.append("rect") .attr("width", width) .attr("height", height); // Add x axis svg.append("g") .attr("class","x axis") .attr("transform","translate(0," + height + ")") .call(xAxis); // Add y axis svg.append("g") .attr("class","y axis") .call(yAxis); /* append additional X axis */ svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + [0, 0] + ")") .call(xAxis.innerTickSize(6).tickPadding(-20).tickFormat("")); /* append additional y axis */ svg.append("g") .attr("class","y axis") .attr("transform", "translate(" + [width, 0] + ")") .call(yAxis.innerTickSize(6).tickPadding(-20).tickFormat("")); // Add x axis label svg.append("text") .attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")") .style("font-size","15") .style("text-anchor", "middle") .text("x axis"); // Add y axis label svg.append("text") .attr("transform", "rotate(-90)") .attr("y",0 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("font-size","15") .style("text-anchor", "middle") .text("y axis"); // Add x grid svg.append("g") .attr("class","grid") .attr("transform","translate(0," + height + ")") .call(xAxis .tickSize(-height,-height,0) .tickFormat("") ); // Add y grid svg.append("g") .attr("class","grid") .call(yAxis .tickSize(-width,-width,0) .tickFormat("") ); function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis); // Add data svg.append("path") .attr("class","line") .attr("d",line(data)); }
body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
1 個解決方案
解決方案1
2 2015-11-27 23:33:16
這里的幾件事：
1.）您沒有在行上應用剪切路徑。 這就是為什么它會超出網格。
2）您的網格是黑色的，因為您已經在其上附加了一個rect （因此它可以接收平移/縮放鼠標事件），但是您沒有將其填充設置為某種顏色（默認情況下為黑色）。 請注意，您不能將其填充設置為none，否則將不會獲得鼠標事件。
3）您不應該像現在那樣共享軸定義：
.call(xAxis.innerTickSize(6).tickPadding(-20).tickFormat(""));
平移和縮放功能將需要重繪軸和網格，並保留對創建的每個軸的引用。
4.）在縮放事件中，請勿重新添加新行。 選擇現有的一個並更新其數據：
d3.select(".line")
.attr("d", line(data));
全部放在一起：
<!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <style> svg { font: 10px sans-serif; shape-rendering: crispEdges; } rect { fill: transparent; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; clip-path: url(#clip); } .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 600 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .domain([0, 10]) .range([0, width]); var y = d3.scale.linear() .domain([0, 10]) .range([height, 0]); var zoom = d3.behavior.zoom() .x(x) .y(y) .scaleExtent([1, 32]) .on("zoom", zoomed); 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 + ")") .call(zoom); var xAxis1 = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5) .innerTickSize(-6) .outerTickSize(0) .tickPadding(7); var yAxis1 = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .innerTickSize(-6) .outerTickSize(0) .tickPadding(7); var xAxis2 = d3.svg.axis() .scale(x) .orient("top") .ticks(5) .innerTickSize(6) .tickPadding(-20) .tickFormat(""); var yAxis2 = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .innerTickSize(6) .tickPadding(-20) .tickFormat(""); var xGrid = d3.svg.axis() .scale(x) .orient("bottom") .tickSize(-height, -height, 0) .tickFormat(""); var yGrid = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width, -width, 0) .tickFormat(""); // Add x grid svg.append("g") .attr("class", "x grid") .attr("transform", "translate(0," + height + ")") .call(xGrid); // Add y grid svg.append("g") .attr("class", "y grid") .call(yGrid); svg.append("g") .attr("class", "x1 axis") .attr("transform", "translate(0," + height + ")") .call(xAxis1); svg.append("g") .attr("class", "y1 axis") .call(yAxis1); /* append additional X axis */ svg.append("g") .attr("class", "x2 axis") .attr("transform", "translate(" + [0, 0] + ")") .call(xAxis2); /* append additional y axis */ svg.append("g") .attr("class", "y2 axis") .attr("transform", "translate(" + [width, 0] + ")") .call(yAxis2); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height); svg.append("rect") .attr("width", width) .attr("height", height); var data = []; for (var k = -100; k < 101; k++) { data.push({ x: k / 10, y: 0.5 * k * k / 100 }); } var line = d3.svg.line() .x(function(d) { return x(dx); }) .y(function(d) { return y(dy); }) .interpolate("linear"); svg.append("path") .attr("class", "line") .attr("d", line(data)) function zoomed() { svg.select(".x1.axis").call(xAxis1); svg.select(".y1.axis").call(yAxis1); svg.select(".x2.axis").call(xAxis2); svg.select(".y2.axis").call(yAxis2); svg.select(".x.grid").call(xGrid); svg.select(".y.grid").call(yGrid); d3.select(".line") .attr("d", line(data)); } </script>
d3js散點圖中的縮放功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.