按不同单位缩放

Question

如何使用D3转换和显示来自不同单位的正确信息

E.g。

所有数据都在mm ..

[ 
    { label: 'sample1', x: 300 }, 
    { label: 'sample2', x: 1200 }, 
    { label: 'sample3', x: 4150 } 
]

所以，问题是，如何创建一个能够理解sample3的比例，应该在4之后和5之前的同一位置。

考虑

1. 10000，它只是一个样本，可以是102301或任何值
2. 如果可能，我想使用D3刻度进行此转换

尝试

let scaleX = d3.scale.linear().domain([-10, 10]).range([0, 500]) // Missing the mm information...

Answer 1

我找到了一种方法......

const SIZE_MM = 10000
const SIZE_PX = 500
const scaleFormat = d3.scale.linear().domain([0, SIZE_MM]).range([-10, 10])
const ticksFormat = d => Math.round(scaleFormat(d))
const ticks = SIZE_MM / SIZE_PX 

const lineScale = d3.scale.linear().domain([0, SIZE_MM ]).range([0, SIZE_PX])
lineScale(9500)
// 475

Answer 2

这里有一个概念问题：

• 将输入（域）映射到输出（范围）：这是比例的任务。
• 格式化轴中的数字和单位（如果有）：这是轴生成器的任务

因此，在您的比例中，您必须将域设置为接受您拥有的原始实际数据（即数据）：

var scale = d3.scaleLinear()
    .domain([-10000, 10000])//the extent of your actual data
    .range([min, max]);

并且，在比例生成器中，您可以更改显示中的值。在这里，我只是将它除以1000并添加“mm”：

var axis = d3.axisBottom(scale)
    .tickFormat(d => d / 1000 + "mm");

请注意，我在这些代码段中使用了D3 v4。

以下是使用这些值的演示：-7500,500和4250.您可以看到圆圈处于适当的位置，但轴显示的值为mm。

var data = [-7500, 500, 4250];

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);

var scale = d3.scaleLinear()
  .domain([-10000, 10000])
  .range([20, 480]);

var axis = d3.axisBottom(scale)
  .tickFormat(d => d / 1000 + "mm");

var circles = svg.selectAll("foo")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 4)
  .attr("fill", "teal")
  .attr("cy", 40)
  .attr("cx", d => scale(d));

var g = svg.append("g")
  .attr("transform", "translate(0,60)")
  .call(axis);

<script src="https://d3js.org/d3.v4.js"></script>