4

基本的なD3.jsの質問、構文を理解する！

D3を使用していますが、軸が存在しない場合は作成し、存在する場合はトランジションで更新します。

私の現在のコードは以下のとおりですが、このコードは毎回軸を再作成します-遷移しません。トランジションに変更するにはどうすればよいですか？

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSize(6, 3, 0);

updateGraphAndAxes(initialdata);

$('#button').click(function() { 
  updateGraphAndAxes(newdata);
});

function updateGraphAndAxes(newdata) { 
  // update x.domain here using newdata, then... 
  svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);
}
4

1 に答える 1

1

この例に従ってください。アプローチは次のようになります。

var xAxisGroup = null;

function updateGraphAndAxes(newdata) { 

    var t = null;

    t = svg.transition().duration(1000);        // Set up transition

    // update x.domain using newdata... 

    if (!xAxisGroup) {
        xAxisGroup = svg.append("g")
            .attr("class", "xTick")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);           
    } else {
        t.select('.xTick').call(xAxis);     // Call xAxis on transition
    }
}
于 2012-08-31T15:44:04.933 に答える