Javascript d3.js中钢筋之间的相关距离

我现在正在做一个条形图，它在格式上与这里的类似，左边是“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));

---

您必须修改Y轴。目前，它只使用

类别的长度

数组：

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

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

    .domain(d3.extent(categories))

---

因此，Y位置也将基于类别值。

您希望以SVG

rect

元素的Y属性为目标。假设您的类别是一个类似[304830603096]的数组，您可以将y属性设置为categories[i+1]-categories[i]

上述操作在数组的最后一个元素不起作用，因为[i+1]将是未定义的。您可以将语句包装为三元，这样，如果i===0，它只返回零（因为0是falsy）。看起来是这样的：

i ? categories[i+1] - categories[i] : 0

如果更容易，您可以像这样创建一个“differences”数组：[0,12,36]。这可能更容易处理，并且在计算记号的位置时可以重用它。（请参阅D3文档中的。您可以提供一个数组来控制轴刻度位置）

您可能还需要添加一些填充（

somePadding

）。默认填充为19

见以下建议修订：

var chart = canvas.append('g')
    .attr("transform", "translate(150,0)")
    .attr('id','bars')
    .selectAll('rect')
    .data(dollars)
    .enter()
    .append('rect')
    .attr('height',19)
    //.attr({'x':0,'y':function(d,i){ return yscale(i)+19; }})
    // modify the y attribute of each SVG rect element
    .attr({'x':0,'y':function(d,i){ return yscale(i) + (i ? categories[i+1] - categories[i] : 0) + somePadding; }})
        .style('fill',function(d,i){ return colorScale(i); })
        .attr('width',function(d){ return 0; });

---

嗨，这就是我要找的。我在图形上这样做了，现在看起来y轴导致了一些问题，即返回d3.js:670错误：属性transform=“translate（0，NaN）”的值无效。我猜这是因为天平被操纵了，这可能会引起一些麻烦。我在上面附上我的代码以供参考。