3

我一直在尝试创建一个带有 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);
    })
}
4

1 回答 1

0

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

于 2012-10-22T18:35:59.253 回答