d3js放大图

时间：2015-11-27 19:17:07

标签： javascript d3.js plot

我用d3js制作了一个情节，因为情节函数超出了我想剪辑它的情节。与此同时，我也想到了缩放。因此，我开始在我的代码中实现以下示例; 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(d.x); })
    .y(function(d) { return y(d.y); })
    .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 个答案:

答案 0 :(得分：2)

这里几件事：

1。）您没有将剪辑路径应用于该行。这就是它超越网格的原因。

2。）你的网格是黑色的，因为你已经附加rect（因此它可以接收平移/缩放鼠标事件），但你没有设置它填写一些东西（默认情况下它是黑色的）。请注意，您无法将其设置为无，因为它不会获得鼠标事件。

3.）你不应该像你一样分享轴定义：

.call(xAxis.innerTickSize(6).tickPadding(-20).tickFormat(""));

平移和缩放功能需要重新绘制轴和网格，并保留对您创建的每个轴的引用。

4.。）在缩放事件中，不要重新添加新行。选择现有的并更新它的数据：

d3.select(".line")
  .attr("d", line(data));

把这一切放在一起：

＆＃13;
＆＃13; 
<!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(d.x);
      })
      .y(function(d) {
        return y(d.y);
      })
      .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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题