D3散布図（時系列の複数線グラフ）

Question

時系列グラフの各データポイントにポイントを配置しようとしました（最終的にはホバーツールチップを使用）。 Here is the D3 Block

複数行部分はthis exampleに基づいており、外部のd3.line()ジェネレータを利用してグラフを描画するdraw（）という関数を作成します。

私は温度データと時間が交差するデータポイント上に散布図を作成しようとしています。これは線ではなく楕円ではなく、私が間違っていることはわかりません。

The failing scatterplot attempt is here.

円は、データ・ポイントをオーバーラップさせるための最善の方法は何ですか？私はJavaScriptデバッガで取得していますエラーが

d3.v4.js:1381 Error: <circle> attribute cx: Expected length, "NaN". 
d3.v4.js:1381 Error: <circle> attribute cy: Expected length, "NaN". 

あるデータの解析は、ラインの交点だけではないのcxとcyの座標で正常に動作するようです。試みが失敗ため

JavaScriptは以下の通りです：

// set the dimensions and margins of the graph 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// parse the date/time 
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S"); 
var formatTime = d3.timeFormat("%e %B"); 

// set the ranges 
var x = d3.scaleTime().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

// define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 


var tempprobe_line = d3.line() 
    .x(function(d) { return x(d.timestamp); }) 
    .y(function(d) { return y(d.tempprobe); }); 

var high_threshold_line = d3.line() 
    .x(function(d){ return x(d.timestamp); }) 
    .y(function(d){ return y(d.threshold_high); }); 

var low_threshold_line = d3.line() 
    .x(function(d){ 
     return x(d.timestamp); 
    }) 
    .y(function(d){ 
     return y(d.threshold_low); 
    }) 


var ambient_line = d3.line() 
    .x(function(d) 
     { return x(d.timestamp);} 
    ) 
    .y(function(d) { 
     return y(d.ambient); 
    }); 


var svg = d3.select("body").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 + ")"); 


function draw(data, tempdata) { 

    var data = data[tempdata]; 

    data.forEach(function(d, i) { 
     d.timestamp = parseDate(d.timestamp); 
     d.tempprobe = +d.tempprobe; 
     d.ambient = +d.ambient; 
    }); 

    data.sort(function(a, b){ 
     return a["timestamp"]-b["timestamp"]; 
    }); 

    // scale the range of data 
    x.domain(d3.extent(data, function(d){ 
     return d.timestamp; 
    })); 
    y.domain([0, d3.max(data, function(d){ 
     return Math.max(d.tempprobe, d.ambient); 
    })]); 

    // Add the tempprobe path. 
    svg.append("path") 
     .data([data]) 
     .attr("class", "line temp-probe temperature") 
     .attr("d", tempprobe_line); 

    // Add the ambient path 
    svg.append("path") 
     .data([data]) 
     .attr("class", "line ambient temperature") 
     .attr("d", ambient_line); 

    svg.append("path") 
     .data([data]) 
     .attr("class", "line high-threshold") 
     .attr("d", high_threshold_line) 

    svg.append("path") 
     .data([data]) 
     .attr("class", "line low-threshold") 
     .attr("d", low_threshold_line) 

    // add the X Axis 
    svg.append("g") 
     .attr("transform", "translate(0,"+ height + ")") 
     .call(d3.axisBottom(x)); 

    // add the Y Axis 
    svg.append("g") 
     .call(d3.axisLeft(y)); 
    } 

    d3.json("temp_data.json", 
     function(error, data){ 
    if (error){ 
     throw error; 
    } 
    draw(data[0], "tempdata"); 
    // Add the scatterplot -- the failing part 
    svg.selectAll("dot") 
     .data(data) 
     .enter().append("circle") 
     .attr("r", 3.5) 
     .attr("cx", function(d) { return x(d.timestamp); }) 
     .attr("cy", function(d) { return y(d.tempprobe); }); 
}); 

Answer 1

あなたはselection.data()関数に渡していたデータが間違っています。必要なデータはdata変数にネストされています。

これが私の作品：

svg.selectAll("dot") 
    .data(data[0]['tempdata']) 
    .enter() 
    .append("circle") 
    .attr("r", 3.5) 
    .attr("cx", function(d) { return x(d.timestamp); }) 
    .attr("cy", function(d) { return y(d.tempprobe); }); 

これは青いtempprobeライン上の各データ点の上に円を追加します。