Javascript d3.js鼠标悬停不会显示在图表中_Javascript_Jquery_D3.js

Javascript d3.js鼠标悬停不会显示在图表中

javascript jquery d3.js

Javascript d3.js鼠标悬停不会显示在图表中,javascript,jquery,d3.js,Javascript,Jquery,D3.js,当执行d3.js脚本时，我试图在图表鼠标中获取以下数据。下面有两个脚本。（index.html和getdata1.csv）。当我在本地主机中运行脚本并检查时，没有得到任何错误。但是我的鼠标器坏了。当鼠标移到文件上时，我试图在文件中显示不同月份的数据。谢谢你的帮助 <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <style> body {

当执行d3.js脚本时，我试图在图表鼠标中获取以下数据。下面有两个脚本。（index.html和getdata1.csv）。当我在本地主机中运行脚本并检查时，没有得到任何错误。但是我的鼠标器坏了。当鼠标移到文件上时，我试图在文件中显示不同月份的数据。谢谢你的帮助

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      body {
        font: 1.1em sans-serif;
      }

      #chart{
        width: 800px;
        margin: 0 auto;
      }
      .background {
        fill: #eee;
      }

      line {
        stroke: #fff;
      }

      text.active {
        fill: red;
      }

      .day {
        fill: #fff;
        stroke: #ccc;
      }

      .month {
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
      }
      .year-title {
        font-size: 1.5em;
      }

      /* color ranges */
      .RdYlGn .q0-11{fill:rgb(165,0,38)}
      .RdYlGn .q1-11{fill:rgb(215,48,39)}
      .RdYlGn .q2-11{fill:rgb(244,109,67)}
      .RdYlGn .q3-11{fill:rgb(253,174,97)}
      .RdYlGn .q4-11{fill:rgb(254,224,139)}
      .RdYlGn .q5-11{fill:rgb(255,255,191)}
      .RdYlGn .q6-11{fill:rgb(217,239,139)}
      .RdYlGn .q7-11{fill:rgb(166,217,106)}
      .RdYlGn .q8-11{fill:rgb(102,189,99)}
      .RdYlGn .q9-11{fill:rgb(26,152,80)}
      .RdYlGn .q10-11{fill:rgb(0,104,55)}

      /* hover info */
      #tooltip {
        background-color: #fff;
        border: 2px solid #ccc;
        padding: 10px;
      }

    </style>
  </head>
    <body>

      <div id="chart" class="clearfix"></div>

  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script>
    var width = 960,
        height = 750,
        cellSize = 25; // cell size

    var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;

    var day = d3.time.format("%w"), // day of the week
        day_of_month = d3.time.format("%e") // day of the month
        day_of_year = d3.time.format("%j")
        week = d3.time.format("%U"), // week number of the year
        month = d3.time.format("%m"), // month number
        year = d3.time.format("%Y"),
        percent = d3.format(".1%"),
        format = d3.time.format("%Y-%m-%d");

    var color = d3.scale.quantize()
        .domain([-.05, .05])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

    var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2018, 2019))
      .enter().append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "RdYlGn")
      .append("g")

    var rect = svg.selectAll(".day")
        .data(function(d) { 
          return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
        })
      .enter().append("rect")
        .attr("class", "day")
        .attr("width", cellSize)
        .attr("height", cellSize)
        .attr("x", function(d) {
          var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
          return day(d) * cellSize + month_padding; 
        })
        .attr("y", function(d) { 
          var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
          var row_level = Math.ceil(month(d) / (no_months_in_a_row));
          return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
        })
        .datum(format);

    var month_titles = svg.selectAll(".month-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(monthTitle)
          .attr("x", function(d, i) {
            var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
            return month_padding;
          })
          .attr("y", function(d, i) {
            var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
            var row_level = Math.ceil(month(d) / (no_months_in_a_row));
            return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
          })
          .attr("class", "month-title")
          .attr("d", monthTitle);

    var year_titles = svg.selectAll(".year-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.years(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(yearTitle)
          .attr("x", function(d, i) { return width/2 - 100; })
          .attr("y", function(d, i) { return cellSize*5.5 - shift_up; })
          .attr("class", "year-title")
          .attr("d", yearTitle);


    //  Tooltip Object
    var tooltip = d3.select("body")
      .append("div").attr("id", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");

    d3.csv("getdata1.csv" , function(error, data)
      {
      console.log(data)
      var data = d3.nest()
        .key(function(d) { return Number(d.completeness); })
        .map(data)});

      rect.filter(function(d) { return Number(d.completeness); })
          .attr("class", function(d) { return "day " + color(Number(d.completeness)); })
          .select("title")
          .text(function(d) { return Number(d.completeness); ;

      //  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var percent_data = Number(d.completeness);
        var purchase_text = d.pipelineName + ": " + percent_data;
        console.log(data)

        tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9);      
        tooltip.html(purchase_text)  
                    .style("left", (d3.event.pageX)+30 + "px")     
                    .style("top", (d3.event.pageY) + "px"); 
      }
      function mouseout (d) {
        tooltip.transition()        
                .duration(500)      
                .style("opacity", 0); 
        var $tooltip = $("#tooltip");
        $tooltip.empty();
      }

    });

    function dayTitle (t0) {
      return t0.toString().split(" ")[2];
    }
    function monthTitle (t0) {
      return t0.toLocaleString("en-us", { month: "long" });
    }
    function yearTitle (t0) {
      return t0.toString().split(" ")[3];
    }
  </script>

  </body>
</html>

getdata1.csv

    period,completeness,pipelineName
    9/2/18,62.1,a
    9/3/18,99.9,b

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      body {
        font: 1.1em sans-serif;
      }

      #chart{
        width: 800px;
        margin: 0 auto;
      }
      .background {
        fill: #eee;
      }

      line {
        stroke: #fff;
      }

      text.active {
        fill: red;
      }

      .day {
        fill: #fff;
        stroke: #ccc;
      }

      .month {
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
      }
      .year-title {
        font-size: 1.5em;
      }

      /* color ranges */
      .RdYlGn .q0-11{fill:rgb(165,0,38)}
      .RdYlGn .q1-11{fill:rgb(215,48,39)}
      .RdYlGn .q2-11{fill:rgb(244,109,67)}
      .RdYlGn .q3-11{fill:rgb(253,174,97)}
      .RdYlGn .q4-11{fill:rgb(254,224,139)}
      .RdYlGn .q5-11{fill:rgb(255,255,191)}
      .RdYlGn .q6-11{fill:rgb(217,239,139)}
      .RdYlGn .q7-11{fill:rgb(166,217,106)}
      .RdYlGn .q8-11{fill:rgb(102,189,99)}
      .RdYlGn .q9-11{fill:rgb(26,152,80)}
      .RdYlGn .q10-11{fill:rgb(0,104,55)}

      /* hover info */
      #tooltip {
        background-color: #fff;
        border: 2px solid #ccc;
        padding: 10px;
      }

    </style>
  </head>
    <body>

      <div id="chart" class="clearfix"></div>

  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script>
    var width = 960,
        height = 750,
        cellSize = 25; // cell size

    var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;

    var day = d3.time.format("%w"), // day of the week
        day_of_month = d3.time.format("%e") // day of the month
        day_of_year = d3.time.format("%j")
        week = d3.time.format("%U"), // week number of the year
        month = d3.time.format("%m"), // month number
        year = d3.time.format("%Y"),
        percent = d3.format(".1%"),
        format = d3.time.format("%Y-%m-%d");

    var color = d3.scale.quantize()
        .domain([-.05, .05])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

    var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2018, 2019))
      .enter().append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "RdYlGn")
      .append("g")

    var rect = svg.selectAll(".day")
        .data(function(d) { 
          return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
        })
      .enter().append("rect")
        .attr("class", "day")
        .attr("width", cellSize)
        .attr("height", cellSize)
        .attr("x", function(d) {
          var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
          return day(d) * cellSize + month_padding; 
        })
        .attr("y", function(d) { 
          var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
          var row_level = Math.ceil(month(d) / (no_months_in_a_row));
          return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
        })
        .datum(format);

    var month_titles = svg.selectAll(".month-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(monthTitle)
          .attr("x", function(d, i) {
            var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
            return month_padding;
          })
          .attr("y", function(d, i) {
            var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
            var row_level = Math.ceil(month(d) / (no_months_in_a_row));
            return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
          })
          .attr("class", "month-title")
          .attr("d", monthTitle);

    var year_titles = svg.selectAll(".year-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.years(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(yearTitle)
          .attr("x", function(d, i) { return width/2 - 100; })
          .attr("y", function(d, i) { return cellSize*5.5 - shift_up; })
          .attr("class", "year-title")
          .attr("d", yearTitle);


    //  Tooltip Object
    var tooltip = d3.select("body")
      .append("div").attr("id", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");

    d3.csv("getdata1.csv" , function(error, data)
      {
      console.log(data)
      var data = d3.nest()
        .key(function(d) { return Number(d.completeness); })
        .map(data)});

      rect.filter(function(d) { return Number(d.completeness); })
          .attr("class", function(d) { return "day " + color(Number(d.completeness)); })
          .select("title")
          .text(function(d) { return Number(d.completeness); ;

      //  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var percent_data = Number(d.completeness);
        var purchase_text = d.pipelineName + ": " + percent_data;
        console.log(data)

        tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9);      
        tooltip.html(purchase_text)  
                    .style("left", (d3.event.pageX)+30 + "px")     
                    .style("top", (d3.event.pageY) + "px"); 
      }
      function mouseout (d) {
        tooltip.transition()        
                .duration(500)      
                .style("opacity", 0); 
        var $tooltip = $("#tooltip");
        $tooltip.empty();
      }

    });

    function dayTitle (t0) {
      return t0.toString().split(" ")[2];
    }
    function monthTitle (t0) {
      return t0.toLocaleString("en-us", { month: "long" });
    }
    function yearTitle (t0) {
      return t0.toString().split(" ")[3];
    }
  </script>

  </body>
</html>

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      body {
        font: 1.1em sans-serif;
      }

      #chart{
        width: 800px;
        margin: 0 auto;
      }
      .background {
        fill: #eee;
      }

      line {
        stroke: #fff;
      }

      text.active {
        fill: red;
      }

      .day {
        fill: #fff;
        stroke: #ccc;
      }

      .month {
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
      }
      .year-title {
        font-size: 1.5em;
      }

      /* color ranges */
      .RdYlGn .q0-11{fill:rgb(165,0,38)}
      .RdYlGn .q1-11{fill:rgb(215,48,39)}
      .RdYlGn .q2-11{fill:rgb(244,109,67)}
      .RdYlGn .q3-11{fill:rgb(253,174,97)}
      .RdYlGn .q4-11{fill:rgb(254,224,139)}
      .RdYlGn .q5-11{fill:rgb(255,255,191)}
      .RdYlGn .q6-11{fill:rgb(217,239,139)}
      .RdYlGn .q7-11{fill:rgb(166,217,106)}
      .RdYlGn .q8-11{fill:rgb(102,189,99)}
      .RdYlGn .q9-11{fill:rgb(26,152,80)}
      .RdYlGn .q10-11{fill:rgb(0,104,55)}

      /* hover info */
      #tooltip {
        background-color: #fff;
        border: 2px solid #ccc;
        padding: 10px;
      }

    </style>
  </head>
    <body>

      <div id="chart" class="clearfix"></div>

  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script>
    var width = 960,
        height = 750,
        cellSize = 25; // cell size

    var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;

    var day = d3.time.format("%w"), // day of the week
        day_of_month = d3.time.format("%e") // day of the month
        day_of_year = d3.time.format("%j")
        week = d3.time.format("%U"), // week number of the year
        month = d3.time.format("%m"), // month number
        year = d3.time.format("%Y"),
        percent = d3.format(".1%"),
        format = d3.time.format("%Y-%m-%d");

    var color = d3.scale.quantize()
        .domain([-.05, .05])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

    var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2018, 2019))
      .enter().append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "RdYlGn")
      .append("g")

    var rect = svg.selectAll(".day")
        .data(function(d) { 
          return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
        })
      .enter().append("rect")
        .attr("class", "day")
        .attr("width", cellSize)
        .attr("height", cellSize)
        .attr("x", function(d) {
          var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
          return day(d) * cellSize + month_padding; 
        })
        .attr("y", function(d) { 
          var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
          var row_level = Math.ceil(month(d) / (no_months_in_a_row));
          return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
        })
        .datum(format);

    var month_titles = svg.selectAll(".month-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(monthTitle)
          .attr("x", function(d, i) {
            var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
            return month_padding;
          })
          .attr("y", function(d, i) {
            var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
            var row_level = Math.ceil(month(d) / (no_months_in_a_row));
            return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
          })
          .attr("class", "month-title")
          .attr("d", monthTitle);

    var year_titles = svg.selectAll(".year-title")  // Jan, Feb, Mar and the whatnot
          .data(function(d) { 
            return d3.time.years(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("text")
          .text(yearTitle)
          .attr("x", function(d, i) { return width/2 - 100; })
          .attr("y", function(d, i) { return cellSize*5.5 - shift_up; })
          .attr("class", "year-title")
          .attr("d", yearTitle);


    //  Tooltip Object
    var tooltip = d3.select("body")
      .append("div").attr("id", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");

    d3.csv("getdata1.csv" , function(error, data)
      {
      console.log(data)
      var data = d3.nest()
        .key(function(d) { return Number(d.completeness); })
        .map(data)});

      rect.filter(function(d) { return Number(d.completeness); })
          .attr("class", function(d) { return "day " + color(Number(d.completeness)); })
          .select("title")
          .text(function(d) { return Number(d.completeness); ;

      //  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var percent_data = Number(d.completeness);
        var purchase_text = d.pipelineName + ": " + percent_data;
        console.log(data)

        tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9);      
        tooltip.html(purchase_text)  
                    .style("left", (d3.event.pageX)+30 + "px")     
                    .style("top", (d3.event.pageY) + "px"); 
      }
      function mouseout (d) {
        tooltip.transition()        
                .duration(500)      
                .style("opacity", 0); 
        var $tooltip = $("#tooltip");
        $tooltip.empty();
      }

    });

    function dayTitle (t0) {
      return t0.toString().split(" ")[2];
    }
    function monthTitle (t0) {
      return t0.toLocaleString("en-us", { month: "long" });
    }
    function yearTitle (t0) {
      return t0.toString().split(" ")[3];
    }
  </script>

  </body>
</html>


身体{
字体：1.1em无衬线；
}
#图表{
宽度：800px；
保证金：0自动；
}
.背景{
填充：#eee；
}
线{
冲程：#fff；
}
text.active{
填充物：红色；
}
.天{
填充：#fff；
冲程：#ccc；
}
.月{
填充：无；
冲程：#fff；
笔画宽度：4px；
}
.年衔{
字号：1.5em；
}
/*颜色范围*/
.RdYlGn.q0-11{fill:rgb（165,0,38）}
.RdYlGn.q1-11{fill:rgb（215,48,39）}
.RdYlGn.q2-11{填充：rgb（244109,67）}
.RdYlGn.q3-11{填写：rgb（253174,97）}
.RdYlGn.q4-11{填写：rgb（25424139）}
.RdYlGn.q5-11{填写：rgb（255255191）}
.RdYlGn.q6-11{fill:rgb（217239139）}
.RdYlGn.q7-11{填写：rgb（166217106）}
.RdYlGn.q8-11{fill:rgb（102189,99）}
.RdYlGn.q9-11{fill:rgb（26152,80）}
.RdYlGn.q10-11{填写：rgb（0104,55）}
/*悬停信息*/
#工具提示{
背景色：#fff；
边框：2个实心#ccc；
填充：10px；
}
可变宽度=960，
高度=750，
cellSize=25；//细胞大小
var no_months_在行=数学地板（宽度/（单元大小*7+50））；
var shift_up=单元大小*3；
var day=d3.time.format（“%w”），//一周中的第几天
每月的第天=d3.time.format（“%e”）//每月的第天
年月日=d3.time.format（“%j”）
week=d3.time.format（“%U”），//一年中的周数
month=d3.time.format（“%m”），//月号
年份=d3.time.format（“%Y”），
百分比=d3.格式（“.1%”），
format=d3.time.format（“%Y-%m-%d”）；
var color=d3.scale.quantize（）
.domain（[-.05.05]）
.range（d3.range（11.map）（函数（d）{return“q”+d+“-11”；}））；
var svg=d3。选择（“图表”）。选择全部（“svg”）
.数据（d3.范围（2018年、2019年））
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“类”、“RdYlGn”）
.附加（“g”）
var rect=svg.selectAll（“.day”）
.数据（功能（d）{
返回d3.时间.天（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“rect”）
.attr（“班级”、“日”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“x”，函数（d）{
var month_padding=1.2*单元大小*7*（（月（d）-1）%（行中无月））；
返回日（d）*单元大小+月份；
})
.attr（“y”，函数（d）{
var week_diff=周（d）-周（新日期（年（d），月（d）-1,1））；
var row_level=Math.ceil（月（d）/（行中无月））；
返回（周差异*单元大小）+行级别*单元大小*8-单元大小/2-班次向上；
})
.基准（格式）；
var month_titles=svg。选择all（“.month title”）//一月、二月、三月等等
.数据（功能（d）{
返回d3.time.months（新日期（d，0，1），新日期（d+1，0，1））；}）
.enter（）.append（“文本”）
.文本（蒙蒂特尔）
.attr（“x”，函数（d，i）{
var month_padding=1.2*单元大小*7*（（月（d）-1）%（行中无月））；
返回月份；
})
.attr（“y”，函数（d，i）{
var week_diff=周（d）-周（新日期（年（d），月（d）-1,1））；
var row_level=Math.ceil（月（d）/（行中无月））；
返回（周差异*单元大小）+行级别*单元大小*8-单元大小-上移；
})
.attr（“类别”、“月份名称”）
.attr（“d”，蒙蒂特尔）；
var year_titles=svg。选择all（“.year title”）//一月、二月、三月等等
.数据（功能（d）{
返回d3.time.years（新日期（d，0，1），新日期（d+1，0，1））；}
.enter（）.append（“文本”）
.正文（标题）
.attr（“x”，函数（d，i）{返回宽度/2-100；}）
.attr（“y”，函数（d，i）{return cellSize*5.5-shift_up；}）
.attr（“类别”、“年度名称”）
.attr（“d”，年号）；
//工具提示对象
变量工具提示=d3。选择（“主体”）
.append（“div”）.attr（“id”、“工具提示”）
.style（“位置”、“绝对”）
.风格（“z指数”、“10”）
.style（“可见性”、“隐藏”）
.text（“简单的工具提示”）；
d3.csv（“getdata1.csv”，函数（错误，数据）
{
console.log（数据）
var data=d3.nest（）
.key（函数（d）{返回编号（d.完整性）；}）
.地图（数据）}）；
矩形过滤器（函数（d）{返回数（d.完备性）；}）
.attr（“类”，函数（d）{return“day”+颜色（Number（d.completency））；}）
.选择（“标题”）
.text（函数（d）{返回编号（d）；
//工具提示
“鼠标悬停”，鼠标悬停；
矩形on（“mouseout”，mouseout）；
功能鼠标盖（d）{
工具提示。样式（“可见性”、“可见”）；
var百分比\数据=数量（d.完整性）；
var purchase_text=d.pipelineName+“：”+百分比数据；
console.log（数据）
tooltip.transition（）
.持续时间（200）
.样式（“不透明度”，.9）；
html（购买文本）
.style（“左”，“d3.event.pageX）+30+“px”）
.style（“top”，（d3.event.pageY）+“px”）；
}
功能鼠标输出（d）{
tooltip.transition（）