13

ですから、私はD3を初めて使用し、JavaScript全般についてはほとんど経験がありません。そのため、私はいくつかのチュートリアルに従っており、現在、基本的な散布図を作成するソースコードを使用しています。ここで私の質問は、transition（）メソッドを使用して、データセットを追加するときに円を移動するにはどうすればよいですか？ボタンを設定できるようにしたいのですが、ユーザーがボタンを押すと、対応するデータセットでtransition（）メソッドがアクティブになります。トランジションについて読んだチュートリアルでは、単一の長方形のトランジションのみを示し、データなしで、複数のアイテムを使用せずに手動で実行しました

//Width and height
var w = 900;
var h = 600;
var padding = 30;


//Static dataset
var dataset = [
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
    [600, 150]
];          

//Create scale functions
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([4, 4]);

//Define X axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


//Create circles
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return rScale(d[1]);
    })
    .attr("fill", "blue");

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
4

2 に答える 2

13

まず、移行の問題に対処する前に、少しリファクタリングする必要があります。update(newData)データが変更されるたびに関数を呼び出し、この関数に必要なすべての更新を実行させる必要があります。

mbostockによるこのチュートリアルでは、必要な「一般的な更新パターン」について正確に説明しています。

次に、パートIIとIIIで、このパターンへの移行をどのように行うかについて説明します。

彼らは非常に短いです。そして、それらを理解すると、これを行うために必要なほぼすべての情報が得られます。

于 2012-11-04T03:32:03.963 に答える
1

.transition()関数の後に.data(newData)関数を指定するだけだと思います

次の例では、Y2はJSONファイルのノードであり、Y1は前に使用されたノードです。

例：

//Creating the button
var button = d3.select("body")
.append("input")
.attr("type","button")
.attr("value", "A button");

//Transitioning process
button.on("click", function()
{   circles
    .data(data.Y2)
    .transition()
    .attr("cx", function(d)
    {
        return d[0];
    }
    )
    .attr("cy", 300);
}
)
于 2013-05-24T18:25:12.793 に答える