2

chart1 を dataset2 で更新する次のコードがありますが、結果として mychart1 の値は dataset2 の新しい値に更新されません。dataset2 の更新された値を myChart1 に反映させたいのですが、デバッガーで割り当てられたクラスを見ると、古いデータが更新されています。

誰かが私が間違っているところを指摘できますか

function chart() {

            //Width and height
            var w = 200;
            var h = 100;
            var barPadding = 2;
            var max = 0;

            this.createChart = function(dataset,cls) {

                //create svg element
                var svg = d3.select("#chartDisplay").append("svg").attr("class",cls).attr(
                        "width", w).attr("height", h);

                //create rect bars
                var rect = svg.selectAll("rect").data(dataset,function(d, i) {return d;});

                rect.enter()
                    .append("rect")
                    .attr("class","original")
                    .attr("x",function(d, i) {
                            return i * (w / dataset.length);
                        })
                    .attr("y", function(d) {
                            return h - d * 3; //Height minus data value
                        })
                    .attr("width", w / dataset.length - barPadding)
                    .attr("height", function(d) {
                            return d * 3;
                        });

                max = d3.max(dataset);
                var xScale = d3.scale.linear().domain([ 0, max ]).range(
                        [ 0, w ]);

            }

            this.updateChart = function(dataset,cls) {

                var svg = d3.select("#chartDisplay").select("svg."+cls);

                var rect = svg.selectAll('rect')
                              .data(dataset,function(d, i) {
                                    return d;
                                });

                rect.attr("y", function(d) {
                    return h - d * 3; //Height minus data value
                         })
                    .attr("height", function(d) {
                        return d * 3;
                         });   

                rect.attr("class","updated");

            }

            this.getMax = function() {
                return max;
            }

        }

        var dataset1 = [ 5, 10, 12, 19, 21, 25, 22, 18, 15, 13 ];
        var dataset2 = [ 1, 4, 14, 19, 16, 30, 22, 18, 15, 13 ];

        var myChart1 = new chart();
        myChart1.createChart(dataset1,"chart1");
        myChart1.updateChart(dataset2,"chart1");

        var myChart2 = new chart();
        myChart2.createChart(dataset2,"chart2");
4

1 に答える 1

2

これが問題です：

var rect = svg.selectAll('rect')
              .data(dataset,function(d, i) { return d; });

d3これは、データ値を配列のキーとして使用するように指示しています。値が変化しているため、異なる値が一致せず、更新されていません (appendそれらを表示するには、別のステートメントを使用する必要があります)。値の配列があるだけなので、値のインデックスをキーとして使用します (これにより、データセット 1 の要素 1 がデータセット 2 の新しい要素 1 の値で更新されるようになります)。

インデックスをキーとして具体的に使用できます。

var rect = svg.selectAll('rect')
              .data(dataset,function(d, i) { return i; });

または、より簡単に言えば、インデックスをキーとして使用することがデフォルトの動作であるため、これを行うことによって。

var rect = svg.selectAll('rect')
              .data(dataset);
于 2013-02-27T18:53:03.023 に答える