3

x 軸のみが歪んでいる d3 魚眼デカルト歪を持つ縦棒グラフを作成しようとしています。

次のコードを使用して、マウスオーバー時に垂直バーの 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 に答える