2

1955 年から 2012 年までの選択した国の GDP を含む Google スプレッドシートからデータを読み込んでいます。これからツリーマップを描きたいと思います。ここまでは順調ですね。

内部リンクからデータをロードし、d3 が処理できるオブジェクトにフォーマットしてから、画面に描画するレイアウトを取得しました。http://bl.ocks.org/mbostock/4063582の Mike Bostock チュートリアルに基づいています。

問題は、たとえば 1955 年から 2010 年までの一連のデータから移行しようとしたときに発生します。最初の表示が正しいため、ツリーマップ レイアウトを生成するために使用している関数が機能していると確信しています。日付を渡すと、ツリーマップ構造が作成されます。

ただし、変更をトリガーすると、遷移が発生したように見え、個々の正方形のサイズが変わります。しかし、それらを調べてみると、それらはすべて間違っていて、新しい価値観を間違った国にマッピングしているように見えることがわかりました.

newstructure は視覚的には正しいように見えますが、すべての名前が間違っています。それで、2012年にキプロスが最大のGDPを持っているようなものを手に入れました。それは、たとえば米国がマップされている新しい値ではなく、大きさの順に別の値のセットが適用されているアルファベット順のリストを持っているかのようです。古い値。

私はまだd3に慣れていないので、ここでぐるぐる回っていますので、すべての助けに感謝しています。

コードは次のようになります。

/*global app:true JST:true d3:true*/

(function (window, $) {

'use strict';

var menuItems = [];
var menuType='measure';
var checboxItems= ['advanced','emerging'];
var ddID = '0';
var model=[];
var yearValue="2012"
var group="gdp";
var treeStruc={
name:[],
children:[]
}

var margin = {top: 25, right: 5, bottom: 5, left: 5},
width = 965 - margin.left - margin.right,
height = 650 - margin.top - margin.bottom;

var color = d3.scale.category10();



app.spreadsheet.get(function (data) {
// TODO: process the data
menuItems = data.measures
//console.log(data);
//console.log('menuItems', menuItems);
//crete dropdown and use toggle to swich display on and off
$('#dropDown').click(function () {
  $('ul.ddMenuList').toggle();
});
//populate the dropdown menu
for (var k = 0; k <menuItems.length; k++) {
  $('#ddList').append('<li id="dd_' + k + '"><a href="#">'+menuItems[k].menulist     +'</li>');
};
//add functionality to dropDown menu
$('#ddList li').bind('click', function () {
  ddID = this.id.split('_')[1];
      var text = $(this).text();
  //console.log ("ID=",ddID);
  //console.log (text, "Measure=",menuItems[ddID].type);
  $('#ddTitle').empty();
  $('#ddTitle').append(text);
  createCheckboxes()
});

function createCheckboxes() {
//decide which check boxes to populate
if (menuItems[ddID].type==="measure") {
  group=menuItems[ddID].type
  checboxItems=[];
  $.each(menuItems, function (i) {
    if (menuItems[i].type==="group"){
      checboxItems.push (menuItems[i].checkbox);
    }
    //console.log (checboxItems);
  });
}
    else {
  group=menuItems[ddID].type
  checboxItems=[];
  $.each(menuItems, function (i) {
    if (menuItems[i].type==="measure"){
      checboxItems.push (menuItems[i].checkbox);
    }
    //console.log (checboxItems);
  });
}
//Populate the check boxes
console.log ("Populating check boxes");
$('#cbHolder').empty();
$('#cbHolder').append('<form>');
    $.each(checboxItems, function (i) {
  $('#cbHolder').append('<input type="checkbox" id="cb_'+i+'">'+checboxItems[i]);
  $('#cbHolder').append('</form>');
  //console.log ("checkboxItems",checboxItems[i]);
});
changed3 ()

}

//creates an object containing just the advanced countries
treeStruc={name:[],children:[]};
console.log ("group=",group);
$.each(checboxItems, function (k) {
  console.log("Parent",checboxItems[k])
  model=jQuery.grep(data.stats,function(e,i){return e[checboxItems[k]];});
  console.log('model', model);
  treeStruc.children.push({"name":checboxItems[k],"children":[]});
  //Construct the children of 1 big group to be completed to be updated for each sheet
  $.each(model, function (i) {
  treeStruc.children[k].children.push({'name':model[i].countryname,'size':model[i]    [group]});
  });
});



console.log('treeStruc', treeStruc)
Handlebars.createOptionsHelper(data.options);
drawd3 ();
});


function generateTreemapLayout(filter){
  return d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { 
      if(d.size[filter] < 0){
        return 0;
      }
  return d.size[filter]; 
    });
  }

function drawd3() {
  console.log ("function drawd3");
  var treemap = generateTreemapLayout('y'+yearValue)



  var div = d3.select("#d3Object").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

    var node = div.datum(treeStruc).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .attr("id",function(d){
        return d.name;
      })
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .text(function(d) { return d.children ? null : d.name; });

    };
    function position() {
      this.style("left", function(d) { return d.x + "px"; })
          .style("top", function(d) { return d.y + "px"; })
          .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
          .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}


function changed3() {
    console.log ("function changed3");
    //make a new treemap layout
    var treemap = generateTreemapLayout('y'+1955);
    console.log('treeStruc',treeStruc);
    //redraw the treemap using transition instead of enter  


    var node = d3.select("#d3Object")
    .datum(treeStruc).selectAll(".node")
    .data(treemap.nodes)
    .transition()
    .duration(1500)
    .call(position)

  }

}(this, jQuery));
4

1 に答える 1

3

これについては、私の同僚である Tom Pearson に感謝します。問題は、データがページ上のアイテムにバインドされている場所にあります。オブジェクト名のような一意の識別子を使用してデータがdivにバインドされていないため、ツリーマップを再描画すると、データがリストの最初の項目に再マップされます。これは、中国のようなものがベルギーの情報を与えられることを意味します。簡単な解決策は次のとおりです

.data(treemap.nodes)

使用する

 .data(treemap.nodes,function(d){
  return d.name;
})

これは、元の drawd3 関数の 2 つのインスタンスであり、changed3 関数のインスタンスです。同様のことで立ち往生している人を助けることを願っています

于 2013-10-11T10:41:46.607 に答える