D3.js D3条形图宽度上的鱼眼

我一直在尝试创建一个垂直条形图，d3鱼眼笛卡尔失真，只有x轴被扭曲

我用以下代码成功地扭曲了鼠标上方垂直条的x位置：

var maxMag = d3.max(dataset, function(d) { return d.value[10]; });
var yScale = d3.scale.linear().domain([0, maxMag]).range([0, h]);
var xScale = d3.fisheye.scale(d3.scale.linear).domain([0, dataset.length]).range([0, w]).focus(w/2);

var bar = svg.append("g")
        .attr("class", "bars")
    .selectAll(".bar")
        .data(dataset)
    .enter().append("rect")
        .attr("class", "bar")
        .attr("y", function(d) {
            return h - yScale(d.value[10]);
        })
        .attr("width", w/dataset.length)
        .attr("height", function(d) {
            return yScale(d.value[10]);
        })
        .attr("fill", function(d) {
            return (d.value[10] <= 6? "yellow" : "orange" );
        })
        .call(position);

// Positions the bars based on data.
function position(bar) {
    bar.attr("x", function(d, i) {
        return xScale(i);
    });
}

svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
    xScale.distortion(2.5).focus(mouse[0]);

    bar.call(position);
});

---

目前，您的栏宽是基于您的全宽除以您的数据集大小正确吗？相反，如果您根据时间计算宽度，例如，您的完整时间跨度除以数据集大小，该怎么办？然后每个条对应一个时间跨度，您可以使用“位置”函数和条的起点和终点来计算宽度。

谢谢您的帮助！尽管在我发布上述问题后，我的代码发生了变化，但您提出的以这种方式计算宽度的建议让我想到，将宽度计算为当前条和下一条条条的x位置之间的差值。我将用我的新代码编辑上面的问题，包括解决问题的代码。谢谢没问题-顺便说一句，这是一个相当整洁的可视化你正在工作！

// Positions the bars based on data.
function position(bar) {
    bar.attr("x", function(d, i) {
        return xScale(i);
    });
    bar.attr("width", function(d, i) {
        return xScale(i+1) - xScale(i);
    })
}