Question

我使用mbostok和d3noob作为参考创建了多线图。 https://gist.github.com/d3noob/d8be922a10cb0b148cd5

我希望它在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

Answer 1

它消失的主要原因是你将y标度更改为[0,100]（硬编码）。由于线路从400到1000，它将不可见。另外，在您的情况下，<div id="profileButtonArea"><div id="profileButtonBox"><img onclick="myProfileIn();" id="profileButtonImg" src="<?php echo $userPath; ?>" /></div></div>是字符串，因此当d3将<div id="myProfileTop" style="display:none;"></div> <div id="myProfileMain" style="display:none;"></div>与count进行比较时，"400"将是最大值。将此解析计数修复为字符串。

为了解决您的问题，请删除

"1000"

并改变

"400"

要

y.domain([0,100]);

d3js多线图不自动更新

1 个答案: