0

サイトの 1 つで見つかった次のコードを変更して、元のデータと更新されたデータの両方をグラフに表示しようとしています。更新されたデータを別の色にして、元のデータを表示し、変更を確認したい。誰でも私にエラーを指摘できますか。

<title>d3 example</title> 
<style>

.original{
 fill: rgb(7, 130, 180);
}

.updated{
 fill: rgb(7,200,200);
}

</style>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>


<script type="text/javascript">
  // Suppose there is currently one div with id "d3TutoGraphContainer" in the DOM
  // We append a 600x300 empty SVG container in the div
  var chart = d3.select("#d3TutoGraphContainer").append("svg").attr("width", "600").attr("height", "300");

  // Create the bar chart which consists of ten SVG rectangles, one for each piece of data
  var rects = chart.selectAll('rect').data([1 ,4, 5, 6, 24, 8, 12, 1, 1, 20])
                   .enter().append('rect')
                   .attr("stroke", "none")
                   //.attr("fill", "rgb(7, 130, 180)")
                   .attr('class','original')
                   .attr("x", 0)
                   .attr("y", function(d, i) { return 25 * i; } )
                   .attr("width", function(d) { return 20 * d; } )
                   .attr("height", "20");

  // Transition on click managed by jQuery
  rects.on('click', function() {
    // Generate randomly a data set with 10 elements
    var newData = [1,2,3,4];

    //for (var i=0; i<10; i+=1) { newData.push(Math.floor(24 * Math.random())); }

    var newRects = d3.selectAll('rects.original');

    newRects.data(newData)
         .transition().duration(2000).delay(200)
         .attr("width", function(d) { return d * 20; } )
         //.attr("fill", newColor);
         .attr('class','updated');
});
</script>

d3.selectAll('rects.original')を使用して元のデータを制御できるかどうかを知りたい

4

1 に答える 1

0

「rects.original」を選択してそれにデータをバインドすると、更新、終了、および開始を選択した結合が作成されます。あなたが達成しようとしていることを完全に理解しているかどうかはわかりませんが、新しいデータを古い四角形やデータとは別に描画したい場合は、そのための新しい選択を作成する必要があります:

              var newRects = chart.selectAll("rect.new")
                                  .data(newData)
                                  .enter()
                               (...)

そしてそれを描きます。SVG でオーバーラップすると、下にある要素が表示されなくなることに注意してください。

「元のデータを制御する」とはどういう意味かわかりませんが、バインドした選択にまだバインドされています。変更する場合は、データを変更して再バインドし、更新選択にトランジションを適用する必要があります。

于 2013-08-21T10:19:16.367 に答える