0

私は d3.js が初めてで、JavaScript 全般の初心者です。配列内の単一の値に基づいて単一の SVG 長方形を正しく描画する d3 を取得しました。入力フィールドを介して領域内の数値の値を増やしてから reDraw 関数を呼び出すと、四角形がわずか 1 秒間新しいサイズに変更され、その後元のサイズに戻ります。スコーピングの問題があるに違いないと思っていますが、それを理解できません。何か案は？

var dataset, h, reDraw, svg, w;

w = 300;

h = 400;

dataset = [1000];

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

// set size and position of bar
svg.selectAll("rect").data(dataset).enter().append("rect").attr("x", 120).attr("y", function(d) {
  return h - (d / 26) - 2;
}).attr("width", 60).attr("height", function(d) {
  return d / 26;
}).attr("fill", "rgb(3, 100, 0)");

// set size and position of text on bar
svg.selectAll("text").data(dataset).enter().append("text").text(function(d) {
  return "$" + d;
}).attr("text-anchor", "middle").attr("x", 150).attr("y", function(d) {
  return h - (d / 26) + 14;
}).attr("font-family", "sans-serif").attr("font-size", "12px").attr("fill", "white");

// grab the value from the input, add to existing value of dataset
$("#submitbtn").click(function() {
  localStorage.setItem("donationTotal", Number(localStorage.getItem("donationTotal")) + Number($("#donation").val()));
  dataset.shift();
  dataset.push(localStorage.getItem("donationTotal"));
  return reDraw();
});

// redraw the rectangle to new size
reDraw = function() {
  return svg.selectAll("rect").data(dataset).attr("y", function(d) {
    return h - (d / 26) - 2;
  }).attr("height", function(d) {
    return d / 26;
  });
};
4

1 に答える 1

1

関数内で新しいデータを既存のデータと一致させる方法を d3 に指示する必要がありreDrawます。つまり、すべての四角形を選択してreDrawから、古いものと新しいものの関係を伝えずにデータをバインドしています。そのため、 を呼び出した後data()、現在のセレクション (操作しているセレクション) は空である必要があります (なぜ何かが起こるのかまったくわかりません)enter()セレクションには新しいデータが含まれ、exit()セレクションには古いデータが含まれます。

これを機能させるには、いくつかのオプションがあります。enter()現在の設定でとの選択を操作するexit()、つまり古いものを削除して新しいものを追加するか、古いものと新しいものを一致させることができるようにデータを再構築することができます。たとえば、単一の数値の代わりに、適切な属性を持つオブジェクトを使用できます。後者には、古いサイズから新しいサイズへの移行を追加できるという利点があります。

データ結合の詳細については、このチュートリアルをご覧ください。

編集：

これは実際には問題ではないことが判明しました。コメントを参照してください。

于 2012-11-13T09:22:21.450 に答える