如何在y上使用与x相同的比例尺，但由于尺寸差异而较小？ [英] How to use the same scale on the y as the x but smaller because of the size difference?

查看：139 发布时间：2018/6/26 10:32:58 javascript html d3.js axis

本文介绍了如何在y上使用与x相同的比例尺，但由于尺寸差异而较小？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码片段：

另外一个jsfiddle：

http://jsfiddle.net/laurieskelly/q0ubpmwj/

x和y都使用相同的域，但它们不是按比例的。这是因为高度与宽度不同，我知道，但我如何编辑y轴以使用与x轴相同的比例，但只是在较小的比例。

例如，我希望x从0-1.8变为0，但是，要说的是0-1.2。但我希望y尺度与x相同。
var x = d3.scale.linear（） .range（[0，width]）; var y = d3.scale.linear（） .range（[height，0]）;

解决方案
终于弄明白了：
var yAxisDomain = maxW /（width / height）; y.domain（[0，yAxisDomain]）。nice（）;
我需要获得宽度和高度的比例差异，然后将轴宽度除以得到正确的比例：）

更新的小提琴：

http://jsfiddle.net/q0ubpmwj/2/

I have the following code snippet:

var data = [{
  "Part": 956,
  "Pos": "P2",
  "Side": "A",
  "Number": 1,
  "PIN/PAD": "A1",
  "xdim": 0.022,
  "ydim": 0.08,
  "centrex": 1.775685039,
  "centrey": 0.1945,
  "Rotated": "TRUE"
}];
var svgContainer = d3.selectAll('#svgContainer');

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 1240 - margin.left - margin.right,
  height = 740 / 1.5 - margin.top - margin.bottom;


var x = d3.scale.linear()
  .range([0, width]);

var y = d3.scale.linear()
  .range([height, 0]);
//.range([width,0]);
//.range([0, width-200]);
var color = d3.scale.category10();

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(15);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(15);

var viewer = d3.select("#svg").append('g')
  //.attr("transform", "translate(" + ((width/2) - (width/4)) + "," + 35 + ")")
  .attr('id', 'viewerSVG');



var svg = viewer.append("svg").attr('id', 'viewerPins')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) // data is the JSON
  {
    d.Length = +d.centrey;
    d.Width = +d.centrex;
    d.xdim = +d.xdim;
    d.ydim = +d.ydim;
  });

// x.domain(d3.extent(data, function(d) { return d.Width; })).nice();
//y.domain(d3.extent(data, function(d) { return d.Length; })).nice();

var maxW = d3.max(data, function(d) {
  return d.Width;
});
var maxL = d3.max(data, function(d) {
  return d.Length;
});

x.domain([0, maxW]).nice();
y.domain([0, maxW]).nice();
//y.domain([0, maxW]).nice();



// axis

var axisMovement = 0; //skipped this for simplicity

svg.append("g")
  .attr("class", "x axis")
  .attr('transform', 'translate(0,' + height + ')')
  // did transform w/o axisMovement thingie for simplicity
  .call(xAxis)
  .append("text")
  .attr("class", "label")
  .attr("x", width - 200)
  .attr("y", -6)
  .style("text-anchor", "end")
  .text("Width (cm)");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("class", "label")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Length (cm)")

interface css .canvas {
  fill: #FEFFFE;
}
#canvasChild.canvas {
  fill: white;
}
.visible {
  visibility: visible;
  opacity: 1;
}
.hidden {
  visibility: hidden;
  pointer-events: none;
}
.textNormal {
  text-anchor: middle;
  color: steelblue;
  position: relative;
  font: 14px Calibri;
}
body {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.dot {
  stroke: #000;
}
.pad956,
.pad958 {
  opacity: 0.8;
  stroke: #000;
}
#pinDataText {
  text-anchor: middle;
  color: steelblue;
  position: relative;
  font: 14px Calibri;
}
.pad956Label,
.pad958Label {
  text-anchor: middle;
  color: steelblue;
  position: relative;
  font: 8px Calibri;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>
<body>
  <div id="title"></div>
  <div id="svg"></div>
</body>

And an alternative jsfiddle:

http://jsfiddle.net/laurieskelly/q0ubpmwj/

Both the x and the y use the same domain, but they're not to scale. This is because the height is different to the width, i know, but how do i edit the y axis to use the same proportions as the x axis but just on a smaller scale.

For example, i want the x to go from 0-1.8, but the y, to say around, 0 - 1.2. But i want the y scale to be the same as the x.

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

解决方案

Finally figured it out :

var yAxisDomain = maxW/(width/height);

y.domain([0, yAxisDomain]).nice();

I needed to get the difference in scale of width and height and then divide the axis width by that to get the correct proportions :)

Updated fiddle :

http://jsfiddle.net/q0ubpmwj/2/

这篇关于如何在y上使用与x相同的比例尺，但由于尺寸差异而较小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在y上使用与x相同的比例尺，但由于尺寸差异而较小？ [英] How to use the same scale on the y as the x but smaller because of the size difference?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在y上使用与x相同的比例尺，但由于尺寸差异而较小？ [英] How to use the same scale on the y as the x but smaller because of the size difference?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭