1

私はd3で簡単なプロットをしようとしています。一度に1行だけプロットすると問題なく動作しますが、コードをより一般的にしたいと思います。

私のデータはこの形式です（2セットのデータには同じ量のポイントが含まれていない可能性があり、時間は2セットの測定値間で完全に同期されていないことに注意してください）：

var data = [{key： "kmm03"、value：[{"time"：1364108443000、 "mesure"： "1.6299999952316284"}、{"time"：1364108503000、 "mesure"： "1.100000023841858"}、{"time" ：1364108563000、 "mesure"： "1.159999966621399"}}、{key： "kmm04"、value：[{"time"：1364108416000、 "mesure"： "2.690000057220459"}、{"time"：1364108476000、 "mesure"： "3.319999933242798"}、{"time"：1364108536000、 "mesure"： "3.140000104904175"}、{"time"：1364108596000、 "mesure"： "2.9800000190734863"}}]

今、私はそれをこのようにプロットしようとしますが、svgラインを支払うことができません：

    var margin = {top: 20, right: 40, bottom: 20, left: 40};
    var width = 780 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;


    var time_scale = d3.time.scale()
        //.domain(time_extent)
        .domain([1364108443000, 1364112559000])
        .range([0, width]);

    var mesure_scale = d3.scale.linear()
        .domain([0,10])
        .range([height, 0]);

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



    var time_axis = d3.svg.axis()
        .scale(time_scale)
        .orient("bottom");
    var mesure_axis = d3.svg.axis()
        .scale(mesure_scale)
        .orient("left");

    var set_axis_t = vis.append("svg:g")
      .attr("transform", "translate(0, " + height +")")
      .call(time_axis);

    var set_axis_m = vis.append("svg:g")
    .attr("transform", "translate(0, 0)")
    .call(mesure_axis);


    var line = d3.svg.line()
        .x(function(d){return time_scale(d.time);})
        .y(function(d){return mesure_scale(d.mesure);});

    var group = vis.selectAll('path')
       .data(data)
       .enter().append('path')
       .attr("d", line);
4

1 に答える 1

5

d3 selection.data（）は、要素の配列を取ります。コードでは、データ変数は2つのオブジェクトの配列です。dでlineを呼び出すと、d3は時間を検索し、各要素のプロパティを測定します。これらは存在しないため、パスは追加されません。

レンダリングする量と時間の値は、各オブジェクトのvalueプロパティの1つ下のレイヤーにネストされます。

これらを描画するには、をに変更.attr('d', line)します.attr("d", function(d) {return line(d.value);});

これが動作中のバージョンです。それを機能させるために、私は他のいくつかの変更を加えました：

1-値配列の閉じ括弧がありませんでした

2-.selectAll('path')軸のパス要素と競合していたため、データに対して機能していませんでした。これに対処するために、クラスvislineにデータパスを割り当て、.selectAll('.visline')それらにアクセスするために使用します

于 2013-03-24T17:08:01.520 に答える