D3.js中的折線圖繪制不正確

Question

我用這個畫了一個線圖。 在這里我做了一些更改，將一些帶有數據的div放在body標簽內。 然后，我將時間設置為x軸，並將true / false值設置為y軸。 我使用常規表達式獲得了數據集的時間值。 通過查看以下代碼，這將很容易理解。 當有注釋數據集（在此代碼中）時，它很好地淹沒了，但是在更改后它不起作用？ 請幫助我確定我所做的錯誤。

 var margin = {top: 20, right: 100, bottom: 30, left: 100}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; //First I test this code with this data set and It worked!!! /*var dataset = [ {x: '2013-03-12 08:00:04', y: true}, {x: '2013-03-12 08:20:04', y: true}, {x: '2013-03-12 08:29:04', y: false}, {x: '2013-03-12 09:30:04', y: true}, {x: '2013-03-12 09:45:04', y: true}, {x: '2013-03-12 09:55:04', y: true}, {x: '2013-03-12 10:01:04', y: true}, {x: '2013-03-12 10:09:04', y: true}, {x: '2013-03-12 10:25:04', y: true}, {x: '2013-03-12 11:37:04', y: false}, {x: '2013-03-12 12:43:04', y: true}, {x: '2013-03-12 12:59:04', y: true}, {x: '2013-03-12 13:10:04', y: true}, {x: '2013-03-12 13:09:04', y: true}, ];*/ /******newest adding code for get data ********/ var dataset = []; var mainRootID = 1; var listID,listID_a; var goThruoughBranch = 1; var testlistID,testlistID_a; var findbranch,dataStatement; var testDate; var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var interval = setInterval(function() { listID = mainRootID + '_' + goThruoughBranch; listID_a = mainRootID + '_' + goThruoughBranch+'_a'; testlistID= document.getElementById(listID); if(testlistID.childNodes[0].id=="T"){ //alert('come inside to the if : T occur'); testlistID_a = document.getElementById(listID_a); dataStatement = testlistID_a.innerHTML; //alert(dataStatement); testDate = dateCatcher(dataStatement); //alert(testDate); dataset.push({ x: parseDate(testDate), y: true, testcase: 'TestSuite:'+mainRootID+' test:'+listID }); //drowLineChart(); }else if(testlistID.childNodes[0].id=="F") { //alert('come inside to the else if: F occur'); testlistID_a = document.getElementById(listID_a); dataStatement = testlistID_a.innerHTML; //alert(dataStatement); testDate = dateCatcher(dataStatement); dataset.push({ x: parseDate(testDate), y: false, testcase: 'TestSuite:'+mainRootID+' test:'+listID }); // drowLineChart(); //setDotInLineChart(); }else{ //alert('come inside to the else: start occur'); } goThruoughBranch++; if(goThruoughBranch==13){ clearInterval(interval); } // alert('dataset.length'+dataset.length); }, 100); //Gives the date part from the whole statement function dateCatcher(statement){ var date_finder =/(\\d{4})\\-(\\d{2})\\-(\\d{2})\\s+(\\d{2}):(\\d{2}):(\\d{2})/; var datePart = statement.match(date_finder); datePart[2] -= 1; var UtcDate = new Date(Date.UTC.apply(this, datePart.slice(1))); //var dateObj = new Date(); var month = UtcDate.getUTCMonth() + 1; //months from 1-12 var day = UtcDate.getUTCDate(); var year = UtcDate.getUTCFullYear(); var hours = UtcDate.getUTCHours(); var minutes = UtcDate.getUTCMinutes(); var seconds = UtcDate.getUTCSeconds(); var newdate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; return newdate; } /**********************************************************/ var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var xScale = d3.time.scale() .range([0, width]); var yScale = d3.scale.ordinal() .range([0,height]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .innerTickSize(-height) .outerTickSize(0) .tickPadding(10) .tickFormat(d3.time.format("%H:%M:%S")); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .innerTickSize(-width) .outerTickSize(0) .tickPadding(10); dataset.forEach(function(d) { dx = parseDate(dx); }); xScale.domain(d3.extent(dataset, function(d) { return dx; })); yScale.domain(dataset.map(function(d) {return dy;} )); var line = d3.svg.line() .x(function(d) { return xScale(dx); }) .y(function(d) { return yScale(dy); }); var svg = d3.select(".chart3").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) svg.append("path") .data([dataset]) .attr("class", "line") .attr("d", line); 

  .axis path, .axis line{ fill: none; stroke: black; } .line{ fill: none; stroke: blue; stroke-width: 2px; } .tick text{ font-size: 12px; } .tick line{ opacity: 0.2; } 

 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Line Chart</title> </head> <body> <ul id="ul_11"> <div tabindex="-1" id="1_1"><li id="start"><a id="1_1_a"> 2015-01-02 11:47:50 Test 11 1 Started</a></li></div> <div tabindex="-1" id="1_2"><li id="T"><a id="1_2_a"> 2015-01-02 11:50:57 Test 11 1 Passed</a></li></div> <div tabindex="-1" id="1_3"><li id="start"><a id="1_3_a"> 2015-01-02 11:57:20 Test 11 2 Started</a></li></div> <div tabindex="-1" id="1_4"><li id="T"><a id="1_4_a"> 2015-01-02 12:10:02 Test 11 2 Passed</a></li></div> <div tabindex="-1" id="1_5"><li id="start"><a id="1_5_a"> 2015-01-02 12:15:14 Test 11 3 Started</a></li></div> <div tabindex="-1" id="1_6"><li id="F"><a id="1_6_a"> 2015-01-02 12:20:24 Test 11 3 Failed</a></li></div> <div tabindex="-1" id="1_7"><li id="start"><a id="1_7_a"> 2015-01-02 12:35:12 Test 11 4 Started</a></li></div> <div tabindex="-1" id="1_8"><li id="F"><a id="1_8_a"> 2015-01-02 12:46:20 Test 11 4 Failed</a></li></div> <div tabindex="-1" id="1_9"><li id="start"><a id="1_9_a"> 2015-01-02 11:57:10 Test 11 5 Started</a></li></div> <div tabindex="-1" id="1_10"><li id="T"><a id="1_10_a">2015-01-02 12:00:00 Test 11 5 Passed</a></li></div> <div tabindex="-1" id="1_11"><li id="start"><a id="1_11_a">2015-01-02 12:12:20 Test 11 6 Started</a></li></div> <div tabindex="-1" id="1_12"><li id="F"><a id="1_12_a">2015-01-02 12:20:24 Test 11 6 Failed</a></li></div> </ul> <div class="chart3"></div> <script src="http://d3js.org/d3.v3.js"></script> </body> </html> 

謝謝你的幫助...

Answer 1

首先，為什么將您的數據解析包裝在setInterval （這種嘗試是在循環嗎？）。 繪制圖形后，解析將開始（ dataset將為空數組）。 清理它（您當前的分析已被破壞），您可以簡化：

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
  dataset = [],
  mainRootID = 1;

// select all lis that have an id or T or F
d3.selectAll('li#T,li#F').each(function() {

  // self will be d3 selector with the li
  var self = d3.select(this),
    // textData is the contents of the a tag
    textData = self.select('a').text().replace(/^\s+|\s+$/g, '').split(" "),
    // this is the id of lis parent div
    listID = d3.select(this.parentNode).attr('id');

  dataset.push({
    x: parseDate(textData[0] + " " + textData[1]), // parse to date
    y: self.attr("id") === "T", // figure out if its t or f
    testcase: 'TestSuite:' + mainRootID + ' test:' + listID
  });

});

// sort the data
dataset.sort(function(d1,d2){
  return d1.x < d2.x;
})

理順之后，圖形又回來了。

完整的工作代碼：

 <html> <head> <title>Line Chart</title> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <style> .axis path, .axis line { fill: none; stroke: black; } .line { fill: none; stroke: blue; stroke-width: 2px; } .tick text { font-size: 12px; } .tick line { opacity: 0.2; } </style> </head> <body> <ul id="ul_11"> <div tabindex="-1" id="1_1"> <li id="start"> <a id="1_1_a"> 2015-01-02 11:47:50 Test 11 1 Started</a> </li> </div> <div tabindex="-1" id="1_2"> <li id="T"> <a id="1_2_a"> 2015-01-02 11:50:57 Test 11 1 Passed</a> </li> </div> <div tabindex="-1" id="1_3"> <li id="start"> <a id="1_3_a"> 2015-01-02 11:57:20 Test 11 2 Started</a> </li> </div> <div tabindex="-1" id="1_4"> <li id="T"> <a id="1_4_a"> 2015-01-02 12:10:02 Test 11 2 Passed</a> </li> </div> <div tabindex="-1" id="1_5"> <li id="start"> <a id="1_5_a"> 2015-01-02 12:15:14 Test 11 3 Started</a> </li> </div> <div tabindex="-1" id="1_6"> <li id="F"> <a id="1_6_a"> 2015-01-02 12:20:24 Test 11 3 Failed</a> </li> </div> <div tabindex="-1" id="1_7"> <li id="start"> <a id="1_7_a"> 2015-01-02 12:35:12 Test 11 4 Started</a> </li> </div> <div tabindex="-1" id="1_8"> <li id="F"> <a id="1_8_a"> 2015-01-02 12:46:20 Test 11 4 Failed</a> </li> </div> <div tabindex="-1" id="1_9"> <li id="start"> <a id="1_9_a"> 2015-01-02 11:57:10 Test 11 5 Started</a> </li> </div> <div tabindex="-1" id="1_10"> <li id="T"> <a id="1_10_a">2015-01-02 12:00:00 Test 11 5 Passed</a> </li> </div> <div tabindex="-1" id="1_11"> <li id="start"> <a id="1_11_a">2015-01-02 12:12:20 Test 11 6 Started</a> </li> </div> <div tabindex="-1" id="1_12"> <li id="F"> <a id="1_12_a">2015-01-02 12:20:24 Test 11 6 Failed</a> </li> </div> </ul> <div class="chart3"></div> <script> /* parse data */ var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse, dataset = [], mainRootID = 1; d3.selectAll('li#T,li#F').each(function() { var self = d3.select(this), textData = self.select('a').text().replace(/^\\s+|\\s+$/g, '').split(" "), listID = d3.select(this.parentNode).attr('id'); dataset.push({ x: parseDate(textData[0] + " " + textData[1]), y: self.attr("id") === "T", testcase: 'TestSuite:' + mainRootID + ' test:' + listID }); }); // sort the data dataset.sort(function(d1,d2){ return d1.x < d2.x; }) /* plot data */ var margin = { top: 20, right: 100, bottom: 30, left: 100 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var xScale = d3.time.scale() .range([0, width]); var yScale = d3.scale.ordinal() .range([0, height]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .innerTickSize(-height) .outerTickSize(0) .tickPadding(10) .tickFormat(d3.time.format("%H:%M:%S")); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .innerTickSize(-width) .outerTickSize(0) .tickPadding(10); xScale.domain(d3.extent(dataset, function(d) { return dx; })); yScale.domain(dataset.map(function(d) { return dy; })); var line = d3.svg.line() .x(function(d) { return xScale(dx); }) .y(function(d) { return yScale(dy); }); var svg = d3.select(".chart3").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) svg.append("path") .data([dataset]) .attr("class", "line") .attr("d", line); </script> </body> </html>