Geek Answers Handbook

How to use the same scale on y as x, but smaller due to size difference?

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 alternative jsfiddle:

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

Both x and y use the same domain, but do not scale. This is because the height is different from the width, I know, but how to edit the y axis to use the same proportions as the x axis, but only on a smaller scale.

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

 var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range([height, 0]);
0
source share
2 answers

Finally it turned out:

 var yAxisDomain = maxW/(width/height); y.domain([0, yAxisDomain]).nice();

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

Updated script:

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

0
source

Select the right side and scale only it.

 var min_dimension = width < height ? width : height; var x = d3.scale.linear().range([0, min_dimension]); var y = d3.scale.linear().range([min_dimension, 0]);

Here I updated the fiddle: http://jsfiddle.net/fen1kz/q0ubpmwj/1/

Edit: Ah, since you are drawing a y-line from above, you should only adjust the height:

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

More articles:


All Articles