不同单位的比例

Question

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

例如

所有数据都在mm..

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

所以，问题是，我如何创建一个比例尺来理解 sample3 应该指向 4 之后和 5 之前的相同位置。

考虑

10000，它只是一个样本，可以是 102301 或任何值
如果可能，我想使用 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。您可以看到圆圈处于适当的位置，但轴以毫米为单位显示值。

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>

不同单位的比例

Scale in different units

javascript

d3.js

scale

react-d3

尝试