5

散布図を作成するために d3 を使用しています。x 軸と y 軸の両方の値のセットには、正と負の値があります。これは d3 を使用する私の最初の試みであり、Xmas の 10 日目に、d3.js を使用してデータを汚すなどの入門チュートリアルから、重要なのは x と y のスケールを正しく設定することです。

次に、私はこのチュートリアルを見つけました: Bar Chart with Negative Values、これは私がそれを正しく理解するのにほとんど役立ちました (私は思います)。私のデータ セットは大きすぎてここに配置できませんが、ここに使用するデータのサンプルがあるコードを示します。

<div id="compareAll"></div>
<script>
window.onload = function() {

var dataSet = [ [4,4], [-4,4], [-4,-4], [4,-4], ];
var x0 = Math.max(-d3.min(dataSet[0]), d3.max(dataSet[0]));
var xScale = d3.scale.ordinal()
             .domain([-x0,x0])
             .range([0,10]);
var yScale = d3.scale.ordinal()
             .domain(d3.range(dataSet[1])
             .rangeRoundBands([0,10]);

var svg = d3.select("#compareAll")
.append("svg")
.attr("width", 10)
.attr("height",10)

svg.selectAll("circle")
.data(dataSet)
.enter()
.append("circle")
.attr("cx", function(d) {
      return xScale(d[0]); 
})
.attr("cy", function(d) {
      return yScale(d[1]); 
})
.attr("r",4); 

var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(1);

var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(1);

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

svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(10,0)")
.call(yAxis);

}

</script>

率直に言って、棒グラフの例での序数スケールの使用法はわかりませんが、それを取り出して xScale と同じ構文で yScale を作成すると、一見悪い結果になりました。

両方の軸に正と負の値を使用するための最良の方法についての説明をいただければ幸いです。明らかな何かが欠けている場合はお知らせください。できるだけ具体的で読みやすくするために、はるかに大きなプロジェクトからのこの例をまとめました。

ありがとう！

4

1 に答える 1

10

軸に負の値を使用することについて特別なことは何もありません。軸に線形スケールを使用し、ドメインを に設定する必要[min, max]がminあります。

ここでコードの動作バージョンを参照してください: http://jsfiddle.net/nrabinowitz/qN5Sa/

これに関するいくつかの注意事項:

  • より多くのマトリックスが必要でない限り、散布図には必ず線形スケールを使用する必要があります。標準的な x スケールは次のようになります。

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

  • The d3.svg.axis() component includes an .orient() setting - by default, this is "bottom", i.e. a horizontal axis with numbers below the line. To make a correctly oriented y-axis, use .orient('left').

  • I didn't include the code to determine the min/max domain for each axis based on your data, because I figured it would complicate the example. But you can do this fairly easily if you don't know the bounds of your data:

    // assuming data like [[x0,y0], [x1,y1]]
var xmin = d3.min(data, function(d) { return d[0] }),
    xmax = d3.max(data, function(d) { return d[0] }),
    ymin = d3.min(data, function(d) { return d[1] }),
    ymax = d3.max(data, function(d) { return d[1] });
于 2012-05-01T19:04:24.023 に答える