Fatal编程技术网
  • javascript/
  • Javascript D3.js未正确更新socket.io中的数据

Javascript D3.js未正确更新socket.io中的数据

javascript html d3.js socket.io

Javascript D3.js未正确更新socket.io中的数据,javascript,html,d3.js,socket.io,real-time,Javascript,Html,D3.js,Socket.io,Real Time,我试图用我传递的数据更新mi图表，数据来得很快，如果我只是做一个控制台日志，我看到数据来得很好，但是当我尝试渲染它时，一切都很慢，我的行只显示第一个状态，从不改变，而且非常慢，我必须重新启动Firefox。这是我的密码： <html> <head> <title>Dinamic Denia</title> <svg id="visualisation" width="1000" height="500"></sv

我试图用我传递的数据更新mi图表，数据来得很快，如果我只是做一个控制台日志，我看到数据来得很好，但是当我尝试渲染它时，一切都很慢，我的行只显示第一个状态，从不改变，而且非常慢，我必须重新启动Firefox。这是我的密码：

<html>
  <head>

    <title>Dinamic Denia</title>


<svg id="visualisation" width="1000" height="500"></svg>
<body>
            <div id="tooltip" class="hidden" style="left: 429px, top: 489.6px">
            <p><strong><span id="city">Dar es Salaam</span></strong></p>

        </div>
</body>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>
<style>
 .axis path, .axis line
        {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }

        .axis text
        {
            font-family: 'Arial';
            font-size: 13px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }
        .bar
        {
            fill: FireBrick;
        }
#tooltip {
            position: absolute;
            width: 230px;
            height: auto;
            padding: 10px;
            background-color: white;
            /*-webkit*/-border-radius: 10px;
            /*-moz*/-border-radius: 10px;
            border-radius: 10px;
            /*-webkit*/-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            /*-moz-*/box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
</style>
    <script type="text/javascript">



      var socket = io.connect('http://localhost:3000/');

      socket.on('connect', function(data){
        setStatus('connected');
        socket.emit('subscribe', {channel:'realtime'});

      });

      socket.on('reconnecting', function(data){
        setStatus('reconnecting');
      });

      socket.on('message', function (data) {

        socket.emit('update', {channel:'realtime'});
        InitChart(data);
        console.log('dades: ', data);
        console.log('received a message: ', data);
        addMessage(data);
      });

      function addMessage(data) {
          $('#online').html(data);
      }

      function setStatus(msg) {
          console.log('Connection Status : ' + msg);
      }


function InitChart(data) {

 var array = data.split(',');
    seeData(array);

       // d3.tsv("dataDL.tsv", function(data) {

        //d3.tsv("data2.tsv", function(data) {
        //seeData(data);  
       // d3.tsv("dataProves.tsv", function(data) {
        //seeData(data);  

function seeData(data) {
        console.log(data, function (d) {return d;});
  var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,

    MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50
    }, 
//var x = new array("1","2","3","4","5","5","7","8","9","10","11","12");
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
        0, 
        25
    ]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
        //Math.min(d3.min(data, function (d) {return +d;}),d3.min(data, function (d) {return +d;}))
        0,10
        //Math.max(d3.max(data, function (d) {return +d;}),d3.max(data, function (d) {return +d;}))
   ]),
 xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);



  vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

  var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d);
  })
  .y(function (d) {
    return yRange(d);
  })
  .interpolate('linear');


vis.append("svg:path")
  .attr("d", lineFunc(data))
  .attr("stroke", "blue")
  .attr("stroke-width", 3)
  .attr("fill", "none")
  //acabar
    .on('click', function(d) {
        d3.select(this)
        if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
        else {d3.select(this) .attr("stroke", "blue")
                d3.select(this) .attr("stroke-width", 3);}
    })
  .on('mouseover', function(d) {
    d3.select(this)
      .attr("stroke", "blue")
      .attr("stroke-width", 9);
            var mousecoord = [0,0];
            mousecoord = d3.mouse(this);

            d3.select("#tooltip")
                .style("left", mousecoord[0] + "px")
                .style("top", mousecoord[1]-40 + "px");

            d3.select("#city")
                .text("Denia");

            d3.select("#tooltip").classed("hidden", false);

  })

  .on('mouseout', function(d) {
    d3.select(this)

        .attr("stroke", "blue")
            .attr("stroke-width", 3);

           d3.select("#tooltip").classed("hidden", true);      

  });
}
}

</script>


迪纳米克德尼亚
达累斯萨拉姆

.轴路径，.轴线
{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本
{
字体系列：“Arial”；
字体大小：13px；
}
打上钩
{
笔划数组：1,2；
}
.酒吧
{
填料：耐火砖；
}
#工具提示{
位置：绝对位置；
宽度：230px；
高度：自动；
填充：10px；
背景色：白色；
/*-webkit*/-边界半径：10px；
/*-moz*/-边界半径：10px；
边界半径：10px；
/*-webkit*/-box阴影：4px4px10px rgba（0,0,0,0.4）；
/*-moz-*/box阴影：4px4px10pxrgba（0,0,0,0.4）；
盒影：4px4x10pxRGBA（0,0,0,0.4）；
指针事件：无；
}
#工具提示。隐藏{
显示：无；
}
#工具提示{
保证金：0；
字体系列：无衬线；
字体大小：16px；
线高：20px；
}
var socket=io.connect（'http://localhost:3000/');
socket.on（'connect'，函数（数据）{
setStatus（“已连接”）；
emit（'subscribe'，{channel:'realtime'}）；
});
socket.on（'重新连接'，函数（数据）{
设置状态（“重新连接”）；
});
socket.on（'message'，函数（数据）{
emit（'update'，{channel:'realtime'}）；
初始图表（数据）；
log（'dades:'，data）；
log（'收到消息：'，数据）；
添加消息（数据）；
});
函数addMessage（数据）{
$（'#online'）.html（数据）；
}
函数setStatus（msg）{
console.log（'连接状态：'+msg）；
}
函数初始化图（数据）{
var数组=data.split（'，'）；
seeData（数组）；
//d3.tsv（“dataDL.tsv”），功能（数据）{
//d3.tsv（“数据2.tsv”），功能（数据）{
//seeData（数据）；
//d3.tsv（“dataprovides.tsv”），函数（数据）{
//seeData（数据）；
函数seeData（数据）{
log（数据，函数（d）{返回d；}）；
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前20名，
右:20,，
底数：20，
左：50
}, 
//var x=新数组（“1”、“2”、“3”、“4”、“5”、“5”、“7”、“8”、“9”、“10”、“11”、“12”）；
xRange=d3.scale.linear（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain([
0, 
25
]),
yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain([
//Math.min（d3.min（数据，函数（d）{return+d；}），d3.min（数据，函数（d）{return+d；}））
0,10
//max（d3.max（数据，函数（d）{return+d；}），d3.max（数据，函数（d）{return+d；}））
]),
xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickSubdivide（真），
yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回范围（d）；
})
.y（功能（d）{
返回Y范围（d）；
})
.插入（“线性”）；
vis.append（“svg:path”）
.attr（“d”，lineFunc（数据））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）
.attr（“填充”、“无”）
//阿卡巴
.on（'点击'）功能（d）{
d3.选择（本）
如果（d3.select（this.attr）（“stroke”）！=“red”）{d3.select（this.attr）（“stroke”，“red”）}
else{d3.select（this.attr）（“stroke”，“blue”）
d3.选择（this）.attr（“笔划宽度”，3）；}
})
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，9）；
var mousecoord=[0,0]；
mousecoord=d3.鼠标（this）；
d3.选择（“工具提示”）
.style（“左”，鼠标命令[0]+“px”）
.样式（“顶部”，鼠标命令[1]-40+“px”）；
d3.选择（“城市”）
.文本（“Denia”）；
d3.选择（“#工具提示”）.classed（“隐藏”，false）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）；
d3.选择（“#工具提示”）.classed（“隐藏”，true）；
});
}
}
你知道为什么它工作得这么慢吗？为什么它只显示行中的第一个结果

谢谢

埃迪

我现在发布的代码很好地及时绘制了线条，但比例不正确，是固定的，而不是dinamic，因此我想创建一个动态onw，但它没有更新任何内容，因为我为数据创建了一个对象，而不是var array=data.split（“，”）。这是对象DATO的一个示例：

datos.x应为：0,1,2,3,4,5,6,7,8,9,10 datos.y应为：10,2,7,8,5,3,6,8,1,10,1

这里是我能够进行工作和绘图的代码：

<html>
  <head>

    <title>Dinamic Denia</title>


<svg id="visualisation" width="1000" height="500"></svg>
<body>
            <div id="tooltip" class="hidden" style="left: 429px, top: 489.6px">
            <p><strong><span id="city">Dar es Salaam</span></strong></p>

        </div>
</body>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>
<style>
 .axis path, .axis line
        {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }

        .axis text
        {
            font-family: 'Arial';
            font-size: 13px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }
        .bar
        {
            fill: FireBrick;
        }
#tooltip {
            position: absolute;
            width: 230px;
            height: auto;
            padding: 10px;
            background-color: white;
            /*-webkit*/-border-radius: 10px;
            /*-moz*/-border-radius: 10px;
            border-radius: 10px;
            /*-webkit*/-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            /*-moz-*/box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
</style>
    <script type="text/javascript">


//InitChart();
//seeData();
      var socket = io.connect('http://localhost:3000/');

   var vis;
    var lineFunc;
    ini();
function ini(){
    vis = d3.select("#visualisation"),//.append("svg"),
    WIDTH = 1000,
    HEIGHT = 500,

    MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50
    },
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
        0, 
        25
    ]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
        //Math.min(d3.min(data, function (d) {return +d;}),d3.min(data, function (d) {return +d;}))
        0,25
        //Math.max(d3.max(data, function (d) {return +d;}),d3.max(data, function (d) {return +d;}))
   ]),

    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);


//var x = new array("1","2","3","4","5","5","7","8","9","10","11","12");

  vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
    lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d);
  })
  .y(function (d) {
    return yRange(d);
  })
  .interpolate('linear');

vis.append("svg")
   .append("path")
  .attr("d", "0")
  .attr("stroke", "blue")
  .attr("stroke-width", 3)
  .attr("fill", "none")
}
function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}


      socket.on('connect', function(data){
        setStatus('connected');
        socket.emit('subscribe', {channel:'realtime'});

      });

      socket.on('reconnecting', function(data){
        setStatus('reconnecting');
      });

      socket.on('message', throttle(function (data) {
                seeData(data); 
  //console.log('tick');
                    }, 500));
        //socket.emit('update', {channel:'realtime'});

        //console.log('received a message: ', data);
        //addMessage(data);

      //});

      function addMessage(data) {
          $('#online').html(data);



        console.log('dades: ', data);
            //$('#visualisation').html(data);
      }

      function setStatus(msg) {
          console.log('Connection Status : ' + msg);

      }

 function seeData(data){
 var array = data.split(',');

 var dades = d3.select("#visualisation").selectAll("path");
  dades.attr("d", lineFunc(array))



  //dades.enter().append("path")

    .on('click', function(d) {
        d3.select(this)
        if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
        else {d3.select(this) .attr("stroke", "blue")
                d3.select(this) .attr("stroke-width", 3);}
    })
  .on('mouseover', function(d) {
    d3.select(this)
      .attr("stroke", "blue")
      .attr("stroke-width", 9);
            var mousecoord = [0,0];
            mousecoord = d3.mouse(this);

            d3.select("#tooltip")
                .style("left", mousecoord[0] + "px")
                .style("top", mousecoord[1]-40 + "px");

            d3.select("#city")
                .text("Denia");

            d3.select("#tooltip").classed("hidden", false);

  })

  .on('mouseout', function(d) {
    d3.select(this)

        .attr("stroke", "blue")
            .attr("stroke-width", 3);

           d3.select("#tooltip").classed("hidden", true);      

  });

    //dades.exit().remove();


}






       // d3.tsv("dataDL.tsv", function(data) {

        //d3.tsv("data2.tsv", function(data) {
        //seeData(data);  
       // d3.tsv("dataProves.tsv", function(data) {
        //seeData(data);  






</script>


迪纳米克德尼亚
达累斯萨拉姆

.轴路径，.轴线
{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本
{
字体系列：“Arial”；
字体大小：13px；
}

<html>
  <head>

    <title>Dinamic Denia</title>


<svg id="visualisation" width="1000" height="500"></svg>
<body>
            <div id="tooltip" class="hidden" style="left: 429px, top: 489.6px">
            <p><strong><span id="city">Dar es Salaam</span></strong></p>

        </div>
</body>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>
<style>
 .axis path, .axis line
        {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }

        .axis text
        {
            font-family: 'Arial';
            font-size: 13px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }
        .bar
        {
            fill: FireBrick;
        }
#tooltip {
            position: absolute;
            width: 230px;
            height: auto;
            padding: 10px;
            background-color: white;
            /*-webkit*/-border-radius: 10px;
            /*-moz*/-border-radius: 10px;
            border-radius: 10px;
            /*-webkit*/-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            /*-moz-*/box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
</style>
    <script type="text/javascript">


//InitChart();
//seeData();
      var socket = io.connect('http://localhost:3000/');

   var vis;
    var lineFunc;
WIDTH = 1000,
    HEIGHT = 500,
     MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50
    };
     xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
        0, 
        25
    ]),
 yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
        //Math.min(d3.min(data, function (d) {return +d;}),d3.min(data, function (d) {return +d;})),
        0,
        25
        //Math.max(d3.max(data, function (d) {return +d;}),d3.max(data, function (d) {return +d;}))
   ]);
ini();
function ini(){
    vis = d3.select("#visualisation"),//.append("svg"),


    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);


//var x = new array("1","2","3","4","5","5","7","8","9","10","11","12");

  vis.append("svg")
    .append("g")    
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  vis.append("svg")
    .append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

    lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.x);
  })
  .y(function (d) {
    return yRange(d.y);
  })
  .interpolate('linear');

vis.append("svg")
   .append("path")
  .attr("d", "0")
  .attr("stroke", "blue")
  .attr("stroke-width", 3)
  .attr("fill", "none")
}
function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}
function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args);
    }

    return arr;
}

      socket.on('connect', function(data){
        setStatus('connected');
        socket.emit('subscribe', {channel:'realtime'});

      });

      socket.on('reconnecting', function(data){
        setStatus('reconnecting');
      });

      socket.on('message', throttle(function (data) {
                seeData(data); 
  //console.log('tick');
                    }, 500));
        //socket.emit('update', {channel:'realtime'});

        //console.log('received a message: ', data);
        //addMessage(data);

      //});

      function addMessage(data) {
          $('#online').html(data);



        console.log('dades: ', data);
            //$('#visualisation').html(data);
      }

      function setStatus(msg) {
          console.log('Connection Status : ' + msg);

      }



function prepara(data){
 var arre = data.split(',');
 var array = createArray(arre.length);
 for  (var i = 0; i < arre.length; i++) {

  array[i]=""+i;
}
var datos = {x:array, y:arre};
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
        d3.min(datos, function (d) {return +datos.x;}), 
        d3.max(datos, function (d) {return +datos.x;})   
        //0, 
        //arre.length

        //Math.min(+datos.x),
        //Math.max(+datos.x),
    ]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
        d3.min(datos, function (d) {return +datos.y;}), 
        d3.max(datos, function (d) {return +datos.y;})      


        //Math.min(+datos.y),
        //0,
        //25
        //Math.max(+datos.y)
   ]);
console.log("d.x "+datos.x+" d.y "+datos.y);
return datos;
}

 function seeData(data){
 var dades = d3.select("#visualisation").selectAll("path");
  dades.attr("d", lineFunc(prepara(data)))
    .on('click', function(d) {
        d3.select(this)
        if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
        else {d3.select(this) .attr("stroke", "blue")
                d3.select(this) .attr("stroke-width", 3);}
    })
  .on('mouseover', function(d) {
    d3.select(this)
      .attr("stroke", "blue")
      .attr("stroke-width", 9);
            var mousecoord = [0,0];
            mousecoord = d3.mouse(this);

            d3.select("#tooltip")
                .style("left", mousecoord[0] + "px")
                .style("top", mousecoord[1]-40 + "px");

            d3.select("#city")
                .text("Denia");

            d3.select("#tooltip").classed("hidden", false);

  })

  .on('mouseout', function(d) {
    d3.select(this)

        .attr("stroke", "blue")
            .attr("stroke-width", 3);

           d3.select("#tooltip").classed("hidden", true);      

  });


var rango = d3.select("#visualisation").selectAll("g.y.axis")
        rango.call(yAxis);
var dominio = d3.select("#visualisation").selectAll("g.x.axis")
        dominio.call(xAxis);





  //dades.enter().append("path")


    //dades.exit().remove();


}






       // d3.tsv("dataDL.tsv", function(data) {

        //d3.tsv("data2.tsv", function(data) {
        //seeData(data);  
       // d3.tsv("dataProves.tsv", function(data) {
        //seeData(data);  






</script>