2

d3 を使用して散布図を作成しようとしていますが、y 軸のドメインがわかりません。Y 軸には患者の名前が表示され、X 軸には予約日が表示されます。x 軸は正常に機能していますが、y 軸には 2 人の患者名しか表示されていません。

function graph()  {

    var num_patient = Object.keys(patientList).length;
    var patient_names = Object.keys(patientList);
    console.log(patient_names);

    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.ordinal().range([height, 0]);

    x.domain(d3.extent(data, function(d) {return parseDate(d.dates); }));
    //y.domain(patient_names.map(function(d)  { return d.name;}));
    y.domain(patient_names);    

    console.log(y.domain());

    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.year, 1)
        .orient("bottom");

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

    var svg = d3.select("#punchcard")
            .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.selectAll("dot")
            .data(data)
        .enter()
        .append("circle")
            .attr("r", 3.5)
            .attr("cx", function(d) { return x(d.date); })
            .attr("cy", function(d) { return y(d.value); });

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

    svg.append("g")         // Add the Y Axis
            .attr("class", "y axis")
            .call(yAxis);
}

console.log(patient_names) は名前を正しく表示します:

`["Andrew","Fred","Steve","John"]`

console.log(y.domain()) は余分な未定義オブジェクトを表示します:

["Andrew", "Fred","Steve" , "John", undefined]

しかし、y 軸はアンドリューを 0 に、フレッドを高さ h に表示するだけです。4 つの名前すべてを表示するにはどうすればよいですか? これらはユーザー入力値であるため、ハードコーディングできません。ところで：私はd3とjsの初心者です。

前もって感謝します！

4

1 に答える 1

7

序数スケールでは、入力の範囲ポイントを明示的に定義する必要があります (ドキュメントを参照してください)。つまり、どの入力値をどの出力にマップするかをスケールに明示的に伝える必要があります。例えば：

var y = d3.scale.ordinal()
          .domain(["Andrew","Fred","Steve","John"])
          .range([height, height * 2/3, height * 1/3, 0]);

.rangePoints()代わりに、ドメイン内の値の数に基づいて D3 が自動的に分割する間隔を指定できるメソッドを使用することをお勧めします。

var y = d3.scale.ordinal()
          .domain(["Andrew","Fred","Steve","John"])
          .rangePoints([height, 0]);

.rangePoints()が正しく機能するには、出力範囲の前にドメインを設定する必要があることに注意してください。

于 2014-03-19T11:34:11.840 に答える