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

Question

我一直在尝试创建一个具有 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 位置的方法更改为使用索引而不是时间，以防止图表中柱之间出现较大间隙

解决方案:感谢 Superboggly，我将位置函数编辑如下:

// 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);
    })
}

Answer 1

目前，您的条形宽度是基于您的全宽除以您的数据集大小，对吗？如果您改为根据时间计算宽度怎么办，例如你的全职时间跨度除以数据集大小？然后每个条对应一个时间跨度，您可以使用带有条开始和结束的“位置”函数来计算宽度。