javascript - d3.js 中条形图之间的关联距离

Question

我现在正在制作一个条形图，它的格式与这里的类似http://bl.ocks.org/kiranml1/6872226 ，“x 轴”位于左侧，“y 轴”位于底部。我在左侧有某些数字作为我的“类别”，例如 3048、3060、3096... 等。每个类别都是一个数字，并且每个类别都有某种差异。

我想知道，如何制作条形图以使每个类别分布不均匀？现在，我有 rangeroundbands ，它使它们均匀分布，但我正在尝试使条形之间的距离与类别之间的数字差异相关。例如，假设 3048、3096、4050，3048 和 3096 之间的距离将小于 3096 和 4050 之间的距离，足够直观，但也不会使条形图变得不可能大。

var yScale = d3.scale.ordinal()
    .domain(d3.extent(molecules_0, function(d) {
        return parseInt(d.molweight);
    }))
    .rangeRoundBands([padding, height - padding]);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickSize(2)
    .tickFormat(function(d, i) {
        return molecules_0[i].molweight;
    })
    .tickValues(d3.range(20));

Answer 1

您必须修改 Y 轴。目前它仅使用 categories 数组的长度:

var yscale = d3.scale.linear()
    .domain([0,categories.length])
    .range([0,480]);

您真正需要做的就是更改域的输入:

    .domain(d3.extent(categories))

这样您的 Y 位置也将基于类别值。