繁体   English   中英

在d3.js多y轴图中重新调整轴刻度和文本

[英]Rescale axis ticks and text in d3.js multi y-axis plot

我有一个基于此代码的平行坐标图: http : //bl.ocks.org/syntagmatic/2409451

我正在尝试获取y轴上的刻度线和数字,以从数据的最小值到最大值进行缩放,而不是像目前所做的那样自动缩放为方便的线性数字。

我无法找到使用d3或js的任何示例,其中任何类型的绘图都可以执行此操作,除非数据碰巧落在这些值上。

我已经能够显示最小值和最大值,但是无法通过在//添加轴和标题的第三行替换为之间获得刻度线:

.each(function(d) {d3.select(this).call(d3.svg.axis().scale(y[d]).tickValues(y[d].domain()).orient("left")); })

作为参考,数据文件以.csv格式读取,最终看起来像这样,字母代表.csv文件中的标题:

var example_data = [
                   {"a":5,"b":480,"c":250,"d":100,"e":220},
                   {"a":1,"b":90,"c":50,"d":33,"e":88}
];

编辑:

主要问题是遍历具有每列域的数组,以创建带有刻度值的新数组。 刻度值可以使用以下方法设置:

d3.svg.axis().scale(y[d]).tickValues(value 1[d],value 2[d], etc)

y [d]由以下方式设置:

// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scale.linear()
    .domain(d3.extent(cars, function(p) { return +p[d]; }))
    .range([h, 0]));
}));

由于您具有最小值和最大值,因此可以按照想要的任何比例将它们映射为任意比例[y0,yn]。 例如,对于y0 = 100,yn = 500(因为HTML从上向下计数)。

在这里我使用线性刻度

d3.scale.linear()
    .domain([yourMin,yourMax])
    .range([y0,yn]);

这有帮助吗?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM