D3.js中的折線圖未正確繪製

我使用this繪製了折線圖。在這裏我做了一些改變。我把一些數據放在body標籤裏面。然後，我將時間設置爲y軸的x軸和真/假值。我使用常規experssion獲得數據集的時間值。通過查看以下代碼，這將很容易理解。當有評論數據集（在這個代碼中）時，它會很好地淹沒，但是在更改後它不起作用？請幫助我確定我所做的錯誤。D3.js中的折線圖未正確繪製

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) { 
 
     d.x = parseDate(d.x); 
 
    });  
 
    
 
xScale.domain(d3.extent(dataset, function(d) { return d.x; }));  
 
yScale.domain(dataset.map(function(d) {return d.y;}));   
 

 

 
var line = d3.svg.line() 
 
    .x(function(d) { return xScale(d.x); }) 
 
    .y(function(d) { return yScale(d.y); }); 
 

 
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>

感謝您的幫助......

來源

2015-10-16 Desi Delite

您是否嘗試過調試？你有錯誤嗎？ – Marc

@Marc：不，沒有錯誤。它顯示了陣列也不是空的。 –

你的正則表達式好嗎？它是否會返回預期的數據值？做一個簡單的寫檢查它。如果不是，這完全是一個與從你的源頭提取數據有關的問題。 –

首先，爲什麼你的數據分析包裹在一個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 d.x; 
 
    })); 
 

 
    yScale.domain(dataset.map(function(d) { 
 
     return d.y; 
 
    })); 
 

 
    var line = d3.svg.line() 
 
     .x(function(d) { 
 
     return xScale(d.x); 
 
     }) 
 
     .y(function(d) { 
 
     return yScale(d.y); 
 
     }); 
 

 
    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>

來源

2015-10-17 17:45:11 Mark

我使用了setInterval函數，因爲我需要在一段時間內更新折線圖。感謝您的代碼....我可以在setInterval函數內做到這一點？然後每次在函數內部更新數組並顯示與之對應的圖形。這是做這個任務的方式，還是有最簡單的方法呢？ –

@DesiDelite，你的'uls'更新中的數據是如何的？現在看來，你只需重複解析相同的數據... – Mark

是否有任何可能的方法在setInterval函數內執行此任務？ –

D3.js中的折線圖未正確繪製

回答

相關問題