Question

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

我试图让刻度线和y轴上的数字从数据的最小值到最大值进行缩放，而不是像目前那样自动缩放到方便的线性数字。

我无法找到使用d3或js的任何示例，其中任何类型的绘图都会这样做，除非数据恰好落在这些值上。

我能够只显示最小值和最大值，但不能通过替换//添加轴和标题的第3行来获取它们之间的刻度：

.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]));
}));

Answer 1

由于你有最小值和最大值，你可以以任何方式映射它们你想要的任何比例[y0，yn]。例如，y0 = 100，yn = 500（因为HTML从上到下计数）。

这里我使用线性刻度

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

这有帮助吗？

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

1 个答案: