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

目前您的条形宽度是基于您的全宽除以数据集大小正确吗？如果您根据时间计算宽度，例如您的全时间跨度除以数据集大小？然后每个条形对应一段时间，您可以使用“位置”功能与条形的起点和终点来计算宽度。

条形图上的宽度D3鱼眼

1 个答案: