1

このグラフをエミュレートしようとしています: http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html

ここに必要最小限のレンディションがあります: http://jsfiddle.net/jd5Ym/6/

それぞれの都市のデータをたどるさまざまなカーソルを取得できません。一度にできることは 1 つだけです。私のコードはこの関数に依存しています:

function mousemove() {
  // p is the fraction of a graph traversed. decimalize strips integers.
var p=decimilize((x0.rangeBand()-d3.mouse(this)[0]+margin.left)/(x0.rangeBand())); 
var u=data[Math.round(data.length-p*data.length)];
var v=cities[1].values[Math.round(data.length-p*data.length)];
cursor.data(data).attr("transform", "translate(" + (x1(u.date)) +","+y(v.temperature)+")");
        }

と書かれているところではv=cities[1]、インデックスはどの都市のデータに従うかを決定します。各都市自体をインデックスしたいのですが、function (d,i) {...}セットアップを使用してみるとうまくいかずmousemove、都市の宣言の変換属性内に関数を追加しようとしましたが、それもうまくいきませんでした。

私は初心者のプログラマーなので、これは簡単かもしれません。データ構造と解析は、Mike Bostock の例から生まれました。

4

1 に答える 1

1

selectAll（'。cities'）。each（...）を使用して、すべての都市をステップオーバーし、カーソルを個別に更新する必要があります。

function mousemove() {
  // the proportion of the way across any given graph that the mouse is
  var mouseX  = d3.mouse(this)[0]
  var graph_width = x0.rangeBand()
  // the corresponding data
  var index = Math.floor( ( mouseX / graph_width ) * data.length );
  d3.selectAll('.city')
    .each(function(d, i){
      var u = cities[i].values[index];
      d3.select(this).select('.cursor')
        .attr('transform', 'translate(' + x1(u.date) + ',' + y(u.temperature) + ')')
    })
}

完全な実例については、ここを参照してください：http: //jsfiddle.net/jd5Ym/9/

于 2013-01-21T07:52:16.563 に答える