javascript - D3.js 中的折线图无法正确绘制

Question

我使用 this 绘制了一个折线图。这里我做了一些更改。我在 body 标签内放置了一些带有数据的 div。然后我将时间设置为 x 轴，将真/假值设置为 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) {
        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>

感谢您的帮助...

Answer 1

首先，为什么您的数据解析包含在 setInterval 中(这是某种循环尝试吗？)。绘制图表后，解析将开始(并且数据集将是一个空数组)。清理它(您当前的解析已损坏)，您可以简化:

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>