2

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

例如

在此处输入图像描述

所有数据都在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...
4

2 回答 2

1

你在这里有一个概念问题：

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

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

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>

于 2017-03-15T23:08:45.983 回答
0

我找到了一种方法来做到这一点..

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
于 2017-03-15T22:25:25.907 回答