个人中心
gpt4 book ai didi

javascript - d3js 放大情节

转载 作者：行者123 更新时间：2023-11-30 16:27:03 26 4
gpt4 key购买 nike

我用 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.) 您没有对线条应用剪辑路径。这就是它超出网格的原因。

2.) 你的网格是黑色的，因为你已经附加了一个 rect 到它(所以它可以接收平移/缩放鼠标事件)但是你没有设置它的填充(它是默认为黑色)。请注意，您不能将它的填充设置为无，因为那样它就不会获得鼠标事件。

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(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>

关于javascript - d3js 放大情节，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33963602/

26 4 0
文章推荐： javascript - jquery preventDefault on alert，如果 alert = ok，则发送
文章推荐： c - 读取逗号分隔的输入 `scanf()`
文章推荐： c - 如何将内核中的数据写入二进制文件
文章推荐： javascript - setDateDisabled + 开始/结束日期中断 bootstrap-datepicker
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com