27

私は D3.js の初心者で、データをいじる方法を学んでいます。

キーとして名前を持つオブジェクトがあり、各キーには次のような数値の配列があるとします。

var userdata = {
    'John' : [0, 1, 3, 9, 8, 7],
    'Harry': [0, 10, 7, 1, 1, 11],
    'Steve': [3, 1, 4, 4, 4, 17],
    'Adam' : [4, 77, 2, 13, 11, 13]
};

ユーザーごとに SVG オブジェクトを追加し、そのユーザーの値の配列を含む線をプロットしたいと思います。

したがって、チュートリアルに基づいてどのように見えるかについての私の仮定は次のとおりですが、それが間違っていることはわかっています。これは、私の限られた知識を示し、私が何をしているのかをよりよく理解してもらうためです:

まず、行を作成する必要があります

var line = d3.svg.line().interpolate('basis');

次に、データを本体にバインドし、各キーに svg 要素を追加します。

d3.select('body')
    .selectAll('svg')
    .data(userdata)
    .enter()
    .append('svg')
    .append(line)
    .x(function(d, i) { return i; })
    .y(function(d) { return d[i]; });

だから私は近いですか？

4

2 に答える 2

39

mbeasley のものに似た別の例を次に示します。まず、あなたのデータを少しだけマッサージしました。値の配列がある場合に最適に機能し、キーを使用してnameおよびvaluesプロパティに簡単にアクセスできるようにしました。

var data = [
    {name: 'John', values: [0,1,3,9, 8, 7]},
    {name: 'Harry', values: [0, 10, 7, 1, 1, 11]},
    {name: 'Steve', values: [3, 1, 4, 4, 4, 17]},
    {name: 'Adam', values: [4, 77, 2, 13, 11, 13]}
];

一般にd3、実際のグラフのサイズと周囲の余白を決定するこのようなグラフを設定します。

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 380 - margin.top - margin.bottom;

次に、データに基づいてスケールを作成できます。作成する必要はありませんが、値をポイントに変換することで、チャート上の要素の配置がはるかに簡単になります。はdomainデータrangeの最小値と最大値であり、 はグラフのサイズの最小値と最大値です。が逆になり、左下隅に (0,0) が配置されることに注意してください (通常、y 軸の 0 は上部にあります range) 。y axis

var x = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.values.length - 1; })])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([d3.min(data, function(d) { return d3.min(d.values); }),
             d3.max(data, function(d) { return d3.max(d.values); })])
    .range([height, 0]);

d3には、カラー スケールを自動的に作成する機能がいくつかあります。使いたいキーと色の数を設定するだけです（10色と20色のオプションがあると思います）。

var color = d3.scale.category10()
    .domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));

ここでは、スケールを使用して x 軸と y 軸を設定します。軸にはさまざまなオプションがあります。TickFormat は目盛りの外観を変更するのに便利で、d3.format多くの異なるオプションがあるため、カスタム フォーマッタを作成する必要はほとんどありません。

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(d3.format('d'))
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

ここでは、線の描画方法を知っている再利用可能な関数を作成します。後で各人の各データポイントを line 関数に渡します。dは、グラフ化している現在の値のセットを保持し、i元のデータ配列内の現在の値のインデックスであることに注意してください。

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

最後に、チャートへの追加を開始できます。まず、メインの svg 要素を作成して配置します。

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

次に、各軸を追加します。

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

各人物にグループ ( g) を追加し、データをグループに関連付けます。線を引くときにこのデータを使用します。class必要に応じて後でチャートのスタイルを設定できるように、を提供します。

  var people = svg.selectAll(".people")
      .data(data)
    .enter().append("g")
      .attr("class", "people");

そして最後に一人一人に線を引きます。

  people.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

あなたのデータを使用して、負の値がある場合のグリッドの描画に関する別の質問に答えました。そのグラフはhttp://jsfiddle.net/2y3er/2/で見ることができます。

于 2012-10-16T22:45:10.500 に答える