d3js多線圖不自動更新

我使用mbostok和d3noob作爲參考創建了多線圖。 https://gist.github.com/d3noob/d8be922a10cb0b148cd5。d3js多線圖不自動更新

我希望它在3秒後刷新。當它刷新時，第一行消失。請建議。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> /* set the CSS */ 

body { font: 12px Arial;} 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 

<!-- load the d3.js library -->  
<script src="http://d3js.org/d3.v3.min.js"></script> 

<script> 

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
    width = 900 - margin.left - margin.right, 
    height = 570 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 


// Set the ranges 
var x = d3.time.scale() 
.range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

//var y = d3.scale.range([height, 0]); 

var axisTimeFormat = d3.time.format.multi([ 
    [".%L", function(d) { return d.getMilliseconds(); }], 
    [":%S", function(d) { return d.getSeconds(); }], 
    ["%H:%M", function(d) { return d.getMinutes(); }], 
    ["%H:%M", function(d) { return d.getHours(); }], 
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }], 
    ["%b %d", function(d) { return d.getDate() != 1; }], 
    ["%B", function(d) { return d.getMonth(); }], 
    ["%Y", function() { return true; }] 
]); 


// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").tickFormat(d3.time.format("%H:%M")); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left").ticks(10); 

// Define the line 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

// Adds the svg canvas 
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 + ")"); 

// Get the data 
d3.tsv("final_report_multi.tsv", function(error, data) { 
    data.forEach(function(d) { 
     //console.log(d.d); 
     d.date = parseDate(d.tim); 
     //d.date = '2016-07-10 22:20:10'; 
     //d.date=d.date 
     d.close = d.count; 
     //console.log(d.date); 
     //console.log(d.close); 

    }); 

//data=data.sort(function(a, b) { 
//    return d3.ascending(a.tim,b.tim); 
//   }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.close; })]); 
    //y.domain(d3.extent(data, function(d) { return d.count; })); 
    y.domain([0,500]); 

var color = d3.scale.category10(); 

// Nest the entries by symbol 
    var dataNest = d3.nest() 
     .key(function(d) {return d.dept;}) 
     .entries(data); 

    // Loop through each symbol/key 
    dataNest.forEach(function(d) { 
     console.log(d.values) 
     svg.append("path") 
      .attr("class", "line") 
      .style("stroke", function() { 
       return d.color = color(d.key); }) 
      .attr("d", valueline(d.values)); 
    }); 


    // Add the valueline path. 
    // svg.append("path") 
//  .attr("class", "line") 
//  .attr("d", valueline(data)); 

    // Add the X Axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

}); 



var inter = setInterval(function() { 
       updateData(); 
     }, 3000); 


     // ** Update data section (Called from the onclick) 
function updateData() { 

    // Get the data again 
    d3.tsv("final_report_multi.tsv", function(error, data) { 
    data.forEach(function(d) { 
     d.date = parseDate(d.tim); 
     d.close = d.count; 
     console.log(d.date); 
     console.log(d.close); 

    }); 

     // Scale the range of the data again 
     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain([0, d3.max(data, function(d) { return d.close; })]); 
     // y.domain([d3.extent(data, function(d) { return d.close; })]); 
     y.domain([0,100]); 

    // Select the section we want to apply our changes to 
    var svg = d3.select("body").transition(); 

    // Nest the entries by symbol 
    var dataNest = d3.nest() 
     .key(function(d) {return d.dept;}) 
     .entries(data); 

    // Loop through each symbol/key 
    dataNest.forEach(function(d) { 
     var svg = d3.select("body").transition(); 
     console.log(d.values) 
     svg.select(".line") // change the line 
      .duration(750) 
      .attr("d", valueline(d.values)); 
     svg.select(".x.axis") // change the x axis 
      .duration(750) 
      .call(xAxis); 
     svg.select(".y.axis") // change the y axis 
      .duration(750) 
      .call(yAxis) 
    }); 

    // Make the changes 
    //  svg.select(".line") // change the line 
    //   .duration(750) 
    //   .attr("d", valueline(data)); 
    //  svg.select(".x.axis") // change the x axis 
    //   .duration(750) 
    //   .call(xAxis); 
    //  svg.select(".y.axis") // change the y axis 
    //   .duration(750) 
    //   .call(yAxis); 

    }); 
} 


</script> 

</body>

TSV文件我用

dept tim count 
home 2016-10-06 23:15:44 220 
home 2016-10-06 23:40:44 150 
toys 2016-10-06 23:10:44 400 
toys 2016-10-06 23:30:44 1000

來源

2016-10-07 Venkat Venkat

喜，任何幫助嗎？ –

請提供一個jsfiddle與您的代碼，它會更容易找到問題 – Cleared

嗨，如果我使用jsfiddle，我得到錯誤「混合內容：在'https://jsfiddle.net/'頁面通過HTTPS加載，但需要一個不安全的腳本'http://d3js.org/d3.v3.min.js'，該請求已被阻止，內容必須通過HTTPS提供。「所以現在我使用了plunker，這裏是鏈接。 http://embed.plnkr.co/jiNYjoPdZG2rdZRDEJj9/。請讓我知道如何解決它。 –

的主要原因，它自敗是你改變y標尺至[0100]（硬編碼）。而且由於線路從400到1000，它將不可見。另外，在你的情況下，count是一個字符串，所以當d3比較"400"與"1000"時，"400"將是最大的值。將此分析計數作爲字符串修復。

因此，要解決您的問題，刪除

y.domain([0,100]);

，並更改

d.close = d.count;

要

d.close = parseInt(d.count);

來源

2016-10-11 07:04:11 Cleared

這兩個都沒有幫助。讓我再次解釋我的問題。最初這兩行顯示正常。我遇到的問題是轉換後，dept = home的第一行消失了。在更新數據部分，一些如何選擇嵌套函數和數據不能正確讀取第一個值。它獲取第二組行的部門= toys –

我嘗試了我在這裏寫的更改：http://plnkr.co/edit/XlMklo4mnwS0LO6t7nlU對於我來說，兩條線在開始時都是可見的，並且兩條線在轉換後都可見。 – Cleared

Hi @cleared，它很有趣。最初藍線顯示值爲220到150。橙色線顯示值爲400到1000（實際上未顯示1000）。 –

d3js多線圖不自動更新

回答

相關問題